javascripthtmlcanvasgetimagedata

How to scale an imageData in HTML canvas?

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? Thanks

Solution

  • 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)[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/.