HTML5 canvas painting rectangle on mouse click

Question

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 (ie 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?

Answer 1

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.