JavaScriptでお絵かき - Canvasでドット単位の操作 その2

昨日のプログラムで、putImageDataを呼び出した後で 絵を書き換えるとどうなるのか試してみました。

canvasを塗りつぶしてputImageDataを呼び出した後、 白い対角線を描いてみました。そのまま 2回目のputImageData呼び出しがなければ、 その対角線は表示されませんでした。 下の画像は、2回目のputImageDataを 呼び出した後の状態です。

こんな感じで、RGBA配列で絵を準備して、 必要な時にputImageDataを呼び出すのだと思います。

https://yamamoto-works.jp/canvas/test03.html

f:id:yamamoto-works:20200212211734p:plain