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

JavaScriptでお絵かきの続きです。 ドット単位で操作したいので、その方法を探しました。 createImageDataでRGBAの配列を取得できます。 それに描画して、putImageDataで書き戻せばできあがりです。

作ってみたプログラムはこちら。

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

実行イメージはこんなの。

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

ソースコードは以下のとおり。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>test2</title>
    <style>
      #mycanvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas width="400" height="400" id="mycanvas"></canvas>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
      $(function() {
        const canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        const ctx = canvas.getContext('2d');
        const maxW = canvas.width;
        const maxH = canvas.height;
        const imgData = ctx.createImageData(maxW, maxH);

        for (let y = 0; y < maxH; y++) {
          for (let x = 0; x < maxW; x++) {
            let idx = (x + y*maxW) * 4;
            imgData.data[idx]   = x % 256;  // r
            imgData.data[idx+1] = 100;      // g
            imgData.data[idx+2] = y % 256;  // b
            imgData.data[idx+3] = 255;      // a
          }
        }
        ctx.putImageData(imgData, 0, 0);
      });
    </script>
  </body>
</html>