添加到画布的图像的奇怪行为

Question

I try to display some images on canvas that should displayed on click event. And everything seems ok, but I found some bug, that I cannot fix for a long. Bug is that on the first page opening lamp image does not display. It can be reproduced by following steps:

1. Open link in browser;
2. click to button image <- clear rectangle will be displayed
3. click again. <- rectangle will be disappeared
4. click again. <- rectangle with image will be displayed

Why image doesnot display first time?

Answer 1

At least you have one (very common) error in your code. The method .onload expects to be assigned with a function reference. You are assigning it to the result (the return value) of the immediate function call processButtonImages(i, delta, buttons[i], object) . So as long as you are not returning a function reference from this function call (which you don't) this will not work as expected.

Answer 2

You are calling and setting somethings in image onload event. So, at first it doesn't execute the whole thing correctly. Check this jsfiddle. I edited the code at the end, http://jsfiddle.net/sKymY/14/