HTML 5 Canvas - Grid Block Fill-In

Question

I've created a Canvas and have written out a grid(resembles graph paper) with the X & Y coordinates successfully. What I'm looking to do now is the following:

-When someone clicks with a mouse a square in the grid will change to a different color
-Once a block is selected that data will not change

Answer 1

You need a separate 2D array that maintains the state for each (x, y) grid position.

When a click happens, check that state array to see if the cell was clicked before, and update the canvas as appropriate.

I created a little demo to show you: http://jsfiddle.net/alnitak/xN45K/