HTML5 Canvas putImageData, translate it, change Image

Question

I want to draw an image using a HTML5 canvas, translate the image and then change the image but keep the transformations I\'ve made. Is this possible?

Here\'s some p

Answer 1

The problem here is that putImageData is not affected by the transformation matrix.

This is by the Spec's orders:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

What you can do is putImageData to an in-memory canvas, and then

inMemCtx.putImageData(imgdata, 0, 0);
context.drawImage(inMemoryCanvas, x, y)

onto your regular canvas, and the translation will be applied to the drawImage call.