JavaScriptでCanvasのピクセル操作｜getImageData・putImageDataの使い方

JavaScriptでCanvasのピクセル単位の操作をしたいけれど、どのメソッドを使えばいいか迷っていませんか？
この記事では、getImageData・putImageDataを使って、ピクセルデータを取得・編集する方法を詳しく解説します。

canvasのgetContextメソッドで描画コンテキストを取得し
let can=document.getElementById("mycanvas"); let ctx=can.getContext("2d", {willReadFrequently:true});

getImageData(左上のx座標, 左上のy座標, 右下のx座標, 右下のy座標)メソッドを使うと、ピクセル単位で色情報を配列(r,g,b,a,r,g,b,a,・・・)で取得することができます。
let d=ctx.getImageData(0,0,幅,高さ);

取得した色情報の配列の値を変更するとピクセル単位で設定できます。
//左上ピクセルの赤成分を255に変更する d.data[ 0 ]= 255; //左上ピクセルの青成分を0に変更する d.data[ 1 ]= 0; //左上ピクセルの緑成分を0に変更する d.data[ 2 ]= 0; //左上ピクセルの不透明度分を255（完全に不透明）に変更する d.data[ 3 ]= 255;

最後にputImageData(色情報の配列, 左上のx座標, 左上のy座標)メソッドを使って色情報の配列をキャンバスに設定します。
ctx.putImageData(d,0,0);

例

ソースコード

<button onclick="redDraw()">canvasを赤色にピクセル単位で塗ります</button><br>
<button onclick="randomDraw()">canvasにランダムに色を塗ります</button><br>
<button onclick="gradationDraw()">canvasにグラデーションに色を塗ります</button><br>
<canvas id="mycanvas" style="width:200px;height:200px" width="200" height="200">

<script>
function redDraw(){
  //キャンバスを取得
  let can=document.getElementById("mycanvas");

  //描画コンテキストを取得
  let ctx=can.getContext("2d",{willReadFrequently:true});

  //キャンバスの描画領域の幅と高さを取得
  let w=can.width;
  let h=can.height;

  //キャンバスのピクセルの色情報を取得する
  let d=ctx.getImageData(0,0,w,h);
  //色情報配列の値を変更する
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      //1ピクセルあたり4つの配列要素で表現されます
      //赤成分に255を設定
      d.data[ (y*w+x)*4 + 0 ] = 255;
      //青成分に0を設定
      d.data[ (y*w+x)*4 + 1 ] = 0;
      //緑成分に0を設定
      d.data[ (y*w+x)*4 + 2 ] = 0;
      //不透明度は255(完全に不透明)を与える
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }
  //ランダムな色情報配列を適用する
  ctx.putImageData(d, 0, 0);
}


function randomDraw(){
  //キャンバスを取得
  let can=document.getElementById("mycanvas");

  //描画コンテキストを取得
  let ctx=can.getContext("2d",{willReadFrequently:true});

  //キャンバスの描画領域の幅と高さを取得
  let w=can.width;
  let h=can.height;

  //キャンバスのピクセルの色情報を取得する
  let d=ctx.getImageData(0,0,w,h);

  //色情報配列の値を変更する
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      //1ピクセルあたり4つの配列要素で表現されます
      //赤成分にランダムな値を与える
      d.data[ (y*w+x)*4 + 0 ] = Math.floor(Math.random()*256);
      //青成分にランダムな値を与える
      d.data[ (y*w+x)*4 + 1 ] = Math.floor(Math.random()*256);
      //緑成分にランダムな値を与える
      d.data[ (y*w+x)*4 + 2 ] = Math.floor(Math.random()*256);
      //不透明度は255(完全に不透明)を与える
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }
  //ランダムな色情報配列を適用する
  ctx.putImageData(d, 0, 0);
}


function gradationDraw(){
  //キャンバスを取得
  let can=document.getElementById("mycanvas");

  //描画コンテキストを取得
  let ctx=can.getContext("2d",{willReadFrequently:true});

  //キャンバスの描画領域の幅と高さを取得
  let w=can.width;
  let h=can.height;

  //キャンバスのピクセルの色情報を取得する
  let d=ctx.getImageData(0,0,w,h);

  //色情報配列の値を変更する
  for(let y=0;y<h;y++){
    for(let x=0;x<w;x++){
      //1ピクセルあたり4つの配列要素で表現されます
      //赤成分をyに設定
      d.data[ (y*w+x)*4 + 0 ] = y;
      //青成分をxに設定
      d.data[ (y*w+x)*4 + 1 ] = x;
      //緑成分を100に設定
      d.data[ (y*w+x)*4 + 2 ] = 100;
      //不透明度成分を255(完全に不透明)に設定
      d.data[ (y*w+x)*4 + 3 ] =255;
    }
  }
  //ランダムな色情報配列を適用する
  ctx.putImageData(d, 0, 0);
}
</script>