title: Scaling a polygon with the screen
body: <p>I need to scale polygons with the size of my screen. Originally the polygons are created on a canvas with a size of 640x480. I would like to scale them down or up to a new resolution of whatever I desire and maintain their relative positions and sizes. Here is the code I am currently using:</p>
  
  <pre><code>    this.scale = function (x1, y1) {
          for (var i = 0; i &lt; this.points.length; i++) {
              this.points[i].x *= x1;
              this.points[i].y *= y1;
          }
      }
  </code></pre>
  
  <p>Where x1 and y1 equal the new size of the screen divided by the original size. The issue I am facing is that the polygons appear to be offset from where they should be relative to an image. I also tried translating the vectors first before scaling and then translating them back to the original centroid using(pseudocode): </p>
  
  <pre><code>centroid = points / number of points
  
  points = points - centroid
  points = points * scale
  points = points + centroid
  </code></pre>
  
  <p>This further offsets the polygons from where they should be relative to the image drawn on the canvas. Is there something I am missing here?</p>
  
  <p>Edit: Added an example image of the issue: <a href="http://i.stack.imgur.com/EGeSw.jpg" rel="nofollow">http://i.stack.imgur.com/EGeSw.jpg</a></p>
  
  <p>Thanks!</p>