translate
only change reference point.
After ctx.translate(0, 500)
x = 0
is upper left corner while y = 0
is 500 down.
You have to paint or put data into the canvas as well.
However getImageData
and putImageData
is not affected by transformation matrix so one have to say e.g.:
var trans = [0, 500];
ctx.putImageData(
canvasData,
x + trans[0],
y + trans[1]
);
or put the data into a memory canvas and use drawImage()
.
Ref.:
The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.
As your code is now you also do a draw + read + redraw onto same region. You could use one draw and then use that as source for all other. There is also no need for the save and restore.
Edit:
Memory canvas as in document.createElement('CANVAS')
. It all depends on how and for what purpose etc. A possible set-up could be.
var img = {}, memc = {}, domc = {};
img.src = document.getElementById(imgId);
img.w = img.src.width;
img.h = img.src.height;
/* DOM Canvas */
domc.can = document.getElementById(canvasId);
domc.ctx = domc.can.getContext('2d');
domc.width = img.w * 2; // Going to duplicate image 2 columns.
domc.height = img.h * 4; // Going to duplicate image 4 rows.
/* Memory Canvas */
memc.can = document.createElement('CANVAS');
memc.ctx = memc.can.getContext('2d');
memc.width = img.w;
memc.height = img.h;