How to scale an imageData in HTML canvas?

Question

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 mak

Answer 1

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 = $("")
    .attr("width", imageData.width)
    .attr("height", imageData.height)[0];

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/.