Shift canvas contents to the left

Question

Is there an easy way to shift canvas contents to the left, dropping the leftmost pixels and moving all others to the left?

Answer 1

Using getImageData and putImageData you could easily implement a pixel-by-pixel shift. For instance:

// shift everything to the left:
var imageData = context.getImageData(1, 0, context.canvas.width-1, context.canvas.height);
context.putImageData(imageData, 0, 0);
// now clear the right-most pixels:
context.clearRect(context.canvas.width-1, 0, 1, context.canvas.height);

Answer 2

If you want to move the whole contents you can use a copy global composite operation with a single drawImage(), drawing the canvas on itself. Doesn't appear to work in safari, but it is crazy fast in chrome.

ctx.globalCompositeOperation = "copy";
ctx.drawImage(ctx.canvas,-widthOfMove, 0);
// reset back to normal for subsequent operations.
ctx.globalCompositeOperation = "source-over"