How can I optimize updating lots of things on an HTML5 canvas?

Question

I have a HTML5 canvas that fills the screen and looks like this:

In this state it is fully zoomed out, but I allow the user zoom in and pan around like in google maps. Every time the viewport changes, I redraw everything that is visible inside the viewport to the canvas. (So as you zoom in less things need to be drawn).

Right now zooming and panning comes with a lot of lag, because each redraw takes 30 milliseconds. When profiling in google chrome, the majority of the time comes from the context.fill() (for drawing a coloured circle) and context.drawImage() (for drawing a glossy transparent overlay on the circles).

So my rendering is very inefficient, but since the draws only happen when the viewport bounds change, its not like I have the option to only redraw a small portion of the screen at a time.

Does anyone know another way I can optimize this?

One idea I was wondering about was to draw the entire thing onto an invisible canvas, and only copy over the viewport bounds to the main canvas. But the invisible canvas would be 2000x2000 pixels. So I am unsure if this would be a good idea.

Answer 1

Drawing multiple light images is faster than drawing multiple fill+images and drawing a single image containing a grid of multiple lights is faster still. So...

• Draw a single image of the 17x17 grid of lights all red (or all brown if brown is more common).

• Then over-draw only those lights that need to be brown.

• Use images of the brown lights rather than brown fill + a glossy overlaid image.