Question

is there a method for scale a set of points drawed in a m x n Canvas and then, redraw a equivalent set of points in a p x q canvas, where p < m and q < n? I know that the method of scaling a coordinate should is a option, but is there any other method for do this?

Thanks in advance

Answer 1

Isn’t this as simple as determining the scale factor(s) and multiplying each point accordingly? Assuming that the two canvases share the height/width ratio, the scale factor is p/m, and you can multiply each point’s coordinates to map them to the new canvas.

If the ratios aren’t the same, you can either use the smaller factor of p/m or q/n to maintain the proportions of the original points to each other, or use p/m to scale the x-axis and q/n to scale the y-axis.

E.g. (assuming map is supported or you’ve created the equivalent):

var points = [{x:1,y:1}, {x:2,y:5}, {x:3,y:1}];
var scaleFactor = canvas2width/canvas1width;
var scaledPoints = points.map(function(p) { 
                       return { 
                           x:p.x*scaleFactor, 
                           y:p.y*scaleFactor
                       }; 
                   });