title: Canvas pixels to coordinates
body: <p>I have a canvas with <code>width = 900, height = 574</code>. I have all the pixels of the canvas. Inside the canvas there are some rectangles, knowing all the pixels of a rectangle what I want is to find the coordinates of the 4 points of a rectangle and then find the width and height of the rectangle.</p>
  
  <p><img src="https://i.stack.imgur.com/XidVB.png" alt="enter image description here"></p>
  
  <p>So what I did is:</p>
  
  <pre><code>  pMinX = (_.min(points)/ 4) % highlightCanvas.width
    pMinY = Math.floor((_.min(points) / 4) / highlightCanvas.width)
    pMaxX = (_.max(points) / 4) % highlightCanvas.width
    pMaxY = Math.floor((_.max(points) / 4) / highlightCanvas.width)
  </code></pre>
  
  <p><code>Points</code> is the array of the pixels (4 channels rgba) of the rectangle of which the coordinates I want to find.</p>
  
  <p>pMinY and pMaxY seem to work well while pMinX, pMaX sometimes seem correct while others are wrong. 
  To test, I created a floating <code>div</code> and resize it according to:</p>
  
  <pre><code>  {
      width:  pMaxX - pMinX
      height: pMaxY - pMinY
    }
  </code></pre>
  
  <p>The height of the div is always correct. But the width there are cases that fails.
  Any idea why sometimes the calculation fails?</p>