CODEWITHSUNDEEP
javascriptgeometryhtml5-canvas
Cheluis
Cheluis

Reputation: 1412

Scaling points on a html canvas

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

Upvotes: 1

Views: 746

Answers (1)

jball
jball

Reputation: 25014

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
                       }; 
                   });

Upvotes: 2

Related Questions