HTML5 canvas click event

Question

I made an array of squares

ctx.fillStyle = "rgb(0,0,0)"; for(x=0;x<=25;x++){   for(y=0;y<=25;y++){           ctx.fillRect(x, y, 20, 20);    } } 

and I want a square to change its colour when clicked. How can I do that?

I don't know much HTML5 and need some help. Thanks.

Answer 1

Using jQuery:

First, we determine which cell was clicked, then you could just draw over that rectangle with a different colour:

 $("#canvas").click(function(e){      var x = Math.floor((e.pageX-$("#canvas").offset().left) / 20);     var y = Math.floor((e.pageY-$("#canvas").offset().top) / 20);     ctx.fillStyle = "rgb(255,255,255)";     ctx.fillRect(x*20, y*20, 20, 20);    });