Multiple layers with the Canvas tag
 

Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems:

(1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart.

(2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it.

I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable?

are you using context.beginPath() to reset the shape drawing?
checkout https://developer.mozilla.org/en/dra...cs_with_canvas for example of drawing overlapping shapes.

No, I hadn't been. That was the problem causing the overlapping lines!
Lesson learned: always use cxt.beginPath(); and cxt.closePath();

And the issue with the multiple colors was just a syntax issue - I had forgotten to use quotations around the color names in my array.

Thank you.