html layering with canvas and table

Question

I am using z-index to keep track of layers. But once the canvas updates using stroke() the layering gets messed up and the table that holds the smaller circles is drawn over.

#canvas{z-index:1; display: div; display: table}
table.center{x-index:2;}

Am I missing any properties or is there another fix? thanks.

Answer 1

I believe that because HTML5 causes the canvas to redraw that part of the screen, it overrides any z-index modifier you have. You may also need to redraw the smaller circles, after redrawing the larger first.

I try to think of it like painting a wall in real life - you have to paint in order, one thing at a time.