image.onload が 1 回ではなく複数回起動されるという非常識な動作に出くわしました。
これを説明すると長くなりすぎるので、jsfiddle の例を次に示します。
最初にクリックするとすべてが正常に見えますが、2回目のクリックで問題が始まり、クリックするたびに何度もループします。
問題は、クリックごとに 1 回だけ image.onload を起動する方法です。
image.onload が 1 回ではなく複数回起動されるという非常識な動作に出くわしました。
これを説明すると長くなりすぎるので、jsfiddle の例を次に示します。
最初にクリックするとすべてが正常に見えますが、2回目のクリックで問題が始まり、クリックするたびに何度もループします。
問題は、クリックごとに 1 回だけ image.onload を起動する方法です。
g
基本的に、ボタンをクリックするたびに呼び出される関数で新しいイベントを定義しています。
関数の外で定義するだけで、すべてが期待どおりに機能するはずです: http://jsfiddle.net/PP2dB/1/