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.

Take a look at this question: stackoverflow.com/questions/1532739/… — Traveling Tech Guy
– Traveling Tech Guy, Commented Jun 18, 2010 at 7:12

Márton Borlay · Accepted Answer · 2010-06-20 18:03:58Z

31

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);


 });

answered Jun 20, 2010 at 18:03

Márton Borlay

5374 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shekhar · Accepted Answer · 2012-03-17 22:52:53Z

6

This beta build by Caleb Evans might help. Following events are included...

click
dblclick
mousedown
mouseup
mousemove

Link to demo on jsFiddle.

answered Mar 17, 2012 at 22:52

Shekhar

8981 gold badge13 silver badges23 bronze badges

Collectives™ on Stack Overflow

HTML5 canvas click event

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related