How to scale all the points used to create lines / curves on the canvas?

Question

I record all the points drawn on the canvas through the mousedown and mousemove . When the canvas size changes (for example, if it was 100w x 200h and the user makes it 200w x 400h), I want to redraw all these points / lines, but at a new scale. What is the right way to do this?

I am currently using the code as shown below, but it does not look right. He draws weird extra lines.

To save points, I write a point in mousedown and mousemove and mark the line as done in mouseup .

A resize event is raised:

 //The new ratios var wRatio = canvas.width / oldWidth; var hRatio = canvas.height / oldHeight; //We need to scale and draw all our points for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) { var start = savedPoints[ i ]; var end = savedPoints[ i + 1 ]; //We're at a new line if ( start === "stopline" ) continue; //We're finishing a previous line else if ( end === "stopline" ) { i++; continue; } //Resize them start.x = start.x * wRatio; start.y = start.y * hRatio; end.x = end.x * wRatio; end.y = end.y * hRatio; //These lines don't make a difference //savedPoints[ i ] = start; //savedPoints[ i + 1 ] = end; //Start recording context.beginPath(); //Move the "pen" to the point context.moveTo( start.x, start.y ); //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural") context.quadraticCurveTo( start.x, start.y, end.x, end.y ); //This doesn't work either //context.lineTo( start.x, start.y, end.x, end.y ); //Draw the line context.stroke(); } 

Answer 1

I think your problem is that you apply the ratio twice to each point by changing savedPoints[i] AND savedPoints[i+1] through the start and end objects. The next iteration, where i = i+1 , savedPoints[i] will already be changed once.

  //The new ratios var wRatio = canvas.width / oldWidth; var hRatio = canvas.height / oldHeight; //We need to scale and draw all our points for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) { var start = savedPoints[ i ]; var end = savedPoints[ i + 1 ]; var endx, endy, startx, starty; //We're at a new line if ( start === "stopline" ) continue; //We're finishing a previous line else if ( end === "stopline" ) { i++; continue; } //Resize them startx = start.x * wRatio; starty = start.y * hRatio; endx = end.x * wRatio; endy = end.y * hRatio; //Start recording context.beginPath(); //Move the "pen" to the point context.moveTo( startx, starty ); //Make the connection of the "line" with our data (I draw the lines originally this way to make more "natural") context.quadraticCurveTo( startx, starty, endx, endy ); //This doesn't work either //context.lineTo( startx, starty, end.x, end.y ); //Draw the line context.stroke(); } for ( var i = 0, last = savedPoints.length - 1; i < last; i++ ) { if (savedPoints[i] !== 'stopline') { savedPoints[i].x *= wRatio; savedPoints[i].y *= hRatio; } }