Html Canvas Intelligent Canvas Drawing

Question

I am currently implementing an HTML canvas based web application with pan function. Is there a way to use an auxiliary buffer to hold the visible area, so when I download, I do not need to redraw the entire canvas and only draw only visible areas?

Answer 1

See my previous answer to the corresponding question: What is the fastest way to move a rectangular (pixel) area inside an HTML5 canvas element

Just draw the entire canvas in a div that has overflow: hidden and implementing panning as re-positioning the top and left canvas inside this div. It is much faster. And don’t worry about drawing canvases with tens of thousands of pixels in width / height, I have successfully used this on very, very large and complex HTML and SVG elements.

Answer 2

Take a look at the pixel manipulation API. http://dev.w3.org/html5/2dcontext/#pixel-manipulation