html5 canvas pixel manipulation and transformations

Question

Since putImageData is unaffected by transformations, how do I manipulate pixels in an image then use transformations on the result? For example, I want to make the reds brighter in a picture then rotate the picture 36 degrees.

Using putImageData doesn't seem to be the answer since I can't rotate it. I tried putting onto a new canvas and using drawImage(newCanvas,0,0) but that didn't even draw the image at all.

I'm stumped.

Can you wrap the canvas element in a container, run your pixel manipulation on the canvas, then rotate the wrapper with CSS or JS? — Aaron, Nov 04 '12 at 00:38

score 0 · Answer 1 · answered Jan 21 '13 at 23:01

Using a new canvas will work. You just have to extract the image first. Something like this will work:

Image img = new Image();
img.src = newCanvas.toDataURL();
canvas.drawImage(img, x, y); // img is drawn with current transformation

Calling toDataURL() takes a snapshot of the canvas contents; changes to the contents of newCanvas after the call will not appear in the image.

html5 canvas pixel manipulation and transformations

1 Answers1