Question

Using canvas I am creating a collection of triangles on a page and then overlaying them all with a large gradient.

Once these triangles are created is there a way to reference them to change their color with javascript on a certain event? Or do I have to draw the triangle again?

The for loop that makes the triangles:

context.fillStyle = color[i-1];
context.beginPath();
context.moveTo(1,leftStart+(itemStartHeight*(i-1))); //Tl
context.lineTo(width,(itemHeight*(i-1))); //Tr
context.lineTo(width,(itemHeight*i)+1); //Br
context.lineTo(1,leftStart+(itemStartHeight*i)+(i!=items ? 1 : 0)); //Bl
context.closePath();
context.fill();

Answer 1

Theres no way to reference individual things drawn on the canvas element by default, to change the colors you have to redraw them