What is the fastest way to move a rectangular (pixel) region inside a HTML5 canvas element

Question

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 con

Answer 1

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.

Answer 2

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.