What Is The Fastest Way To Move A Rectangular (pixel) Region Inside A HTML5 Canvas Element

I want to implement vertical scrolling of the contents of a HTML5 canvas element. I don't want to render the whole content again. Instead I would like to move the whole content dow

Solution 1:

Try this:

ctx.drawImage(ctx.canvas, 0, 0, width, height-20, 0, 20, width, height-20);

drawImage can take either an HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement for the first argument.

Solution 2:

For absolute speed, I would use an over-sized <canvas> inside a <div> with overflow:hidden set then use regular DOM methods to scroll the <canvas> inside the <div>.

Of course, this sacrifices memory usage in favor of speed.