CODEWITHSUNDEEP
javascripthtml5-canvasdom-events
Omar Wagih
Omar Wagih

Reputation: 8732

HTML5 canvas painting rectangle on mouse click

I have a canvas which loads in a selected image. The canvas should display 2 6x6 rectangles where the user clicks. On the first click, the rectangle should be red, the second click it should be blue on the third click, it resets (deletes both first rectangles) and so on.. This works fine (see example here: http://jsfiddle.net/8HSGG/)

My problem is when I reload an image, the rectangles start messing up (i.e. colors come in different order or don't show up at all).

I have two variables in the Javascript: topLeft and bottomRight which are both null whenever an image is loaded in, then a check based on those and paint accordingly.

Any idea what's going on?

Upvotes: 0

Views: 465

Answers (1)

JayC
JayC

Reputation: 7141

You're adding click and mouseover event listeners to the canvas every time you're "handling" the image. Thus, I would suspect you're getting code that gets invoked multiple times.

Upvotes: 4

Related Questions