title: How to calculate actual width and height of rotated object in canvas?
body: <p>Am trying to calculate width and height of object i loaded into canvas. When object is not rotated i get correct left right top bottom values, but when i load rotated object in canvas then i not get correct values , so i wonder what will be the logic or math formula to do achieve it.</p>
  
  <p>how am doing.</p>
  
  <ul>
  <li>initially load image into canvas</li>
  <li>get image data from canvas</li>
  <li>loop through image data to get only colored pixels by using alpha check</li>
  <li><p>from colored pixel array find min max xy values</p>
  
  <pre><code>var temp_ray = [];  // pixel array
  
      for (var y = 0; y &lt; imgData.height; ++y) {
          for (var x = 0; x &lt; imgData.width; ++x) {
              var index = (y * imgData.width + x) * 4; 
              if(imgData.data[index+3]){  
                  var xc = (index / 4) % imgData.width;   
                  var yc = Math.floor((index / 4) / imgData.width);  
                  temp_ray.push([xc,yc]);     
              }
  
          }
      }
      if(temp_ray.length &gt; 0){
          var Xind = MaxMin2darray(temp_ray,0);
          var Yind = MaxMin2darray(temp_ray,1);
          var W = parseFloat(Xind['max']) - parseFloat(Xind['min']);
          var H = parseFloat(Yind['max']) - parseFloat(Yind['min']);  
          var center_x = Xind['min'] + (W/2);
          var center_y = Yind['min'] + (H/2);
          // find corners of object
  
          // find *min x , min y 
          let top_left = temp_ray[Xind['imin']];    // min X priority , min Y   // top left
          // find max x , *min y 
          let top_right = temp_ray[Yind['imin']];    // max X, min Y priority ,   // top right
          // find *max x , min y 
          let bot_right = temp_ray[Xind['imax']];    // max X priority , min Y  // bottom right 
          // find max x , *max y 
          let bot_left = temp_ray[Yind['imax']];    // max X , max Y priority // bottom left  
  
          var dim = {'W':W,'H':H,'CenterX':center_x,'CenterY':center_y,'top_left':top_left,'top_right':top_right,'bot_right':bot_right,'bot_left':bot_left,'Xend':Xind['max'],'Yend':Yind['max'],'Xstart':Xind['min'],'Ystart':Yind['min'],'Xend':Xind['max'],'Yend':Yind['max']};
          console.log(dim);
      }
  </code></pre></li>
  </ul>
  
  <p>and then using min max xy value find corners of object which works with none rotated objects but not work with rotated/tilted objects.</p>
  
  <p>so any idea how to solve this problem
  <a href="https://i.stack.imgur.com/KUVml.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KUVml.png" alt="enter image description here"></a></p>
  
  <ul>
  <li><p>openpnp project is achieving this through opencv, but i think in js we do not have opencv library nor am that pro of java :(.</p>
  
  <p><a href="https://github.com/openpnp/openpnp/blob/develop/src/main/java/org/openpnp/vision/pipeline/stages/DrawRotatedRects.java" rel="nofollow noreferrer">https://github.com/openpnp/openpnp/blob/develop/src/main/java/org/openpnp/vision/pipeline/stages/DrawRotatedRects.java</a></p></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/4Z4Zi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Z4Zi.png" alt="enter image description here"></a></p>
  
  <p>jsfiddle:  <a href="http://jsfiddle.net/4L13vtaj/" rel="nofollow noreferrer">http://jsfiddle.net/4L13vtaj/</a></p>