I have a canvas in my webpage; I create a new Image data in this canvas then I modify some pixel through myImgData.data array. Now I would like to scale this image and make it bigger. I tried by scaling the context but the image remains small. Is it possible to do this?
You could draw the imageData to a new canvas, scale the original canvas and then draw the new canvas to the original canvas.
Something like this should work:
var imageData = context.getImageData(0, 0, 100, 100); var newCanvas = $("<canvas>") .attr("width", imageData.width) .attr("height", imageData.height); newCanvas.getContext("2d").putImageData(imageData, 0, 0); context.scale(1.5, 1.5); context.drawImage(newCanvas, 0, 0);
Here's a functioning demo http://jsfiddle.net/Hm2xq/2/.