HTML5 canvas how to zoom putImageData

Question

How to zoom putImageData with a scale (1.5, 1.5) does not work.

var imageData = context.getImageData(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height); context.scale(1.5, 1.5); context.putImageData(imageData, 0, 0); 

Answer 1

That's right, your code will not scale existing drawings.

context.scale only affects new drawings, not existing drawings.

context.putImageData will return the saved source pixels to the canvas, but putImageData is not a drawing command, so its results will not be scaled.

To scale existing pixels, you must save the pixels for the object outside of your canvas. An external object can be a new image element or a second Canvas element.

Sample code and demo: http://jsfiddle.net/m1erickson/p5nEE/

 // canvas related variables var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); // draw a test square context.fillStyle="red"; context.fillRect(0,0,50,50); // create an image from the canvas // clear & scale the canvas // draw the image to the canvas var imageObject=new Image(); imageObject.onload=function(){ context.clearRect(0,0,canvas.width,canvas.height); context.scale(1.2,1.2); context.drawImage(imageObject,0,0); } imageObject.src=canvas.toDataURL();