Re-Drawing Html5 Canvas

Question

I've a chart and a grid, the former can be hidden/shown by clicking on some checkbox. Could anyone come up with a meta code, demonstrating the most performant approach for doing that? I can't see anything better other than re-drawing the whole canvas each time my 'Show Grid' setting gets changed.

Answer 1

You can use two canvas nodes; one for the chart and the other for the grid on top of it.

Then you can just hide (style.display = "none") the grid element or show it (style.display = "block").

A canvas pixel includes alpha, so it can be completely transparent (this is actually the default when a canvas is created) therefore you can see chart through the grid.