How to scale an imageData in HTML canvas?

html canvas getimagedata
Masiar picture Masiar · Aug 10, 2010 · Viewed 34.2k times · Source

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

Answer

Castrohenge picture Castrohenge · Aug 10, 2010

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

Related questions

Get pixel color from canvas, on mousemove

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.…

Read More
possible to use html images like canvas with getImageData / putImageData?

I'd like to know if there is a way to dynamically modify/access the data contained in html images just as if they were an html5 canvas element. With canvas, you can in javascript access the raw pixel data with …

Read More
Horrible Canvas GetImageData() / PutImageData() performance on mobile

I'm doing a little HTML5 game and, while loading my sprites at the beginning of the map, I do some processing with GetImageData() / looping over all the image / PutImageData(). This works fantastically great on my PC, however, on my cell …

Read More