canvas

<canvas>

画像を描くためのタグ

コンテキストの取得

キャンバス.getContext("2d")

画像をコピー

<img>

コンテキスト.drawImage(imgタグ, x, y)

<canvas> 内の座標(x, y) を起点に画像をコピーする

サイズ

px 単位

Get

キャンバス.width

キャンバス.height

Set

キャンバス.width = 幅

キャンバス.height = 高さ

ピクセルの色(RGBA)

　RGBA配列の取得

ピクセル範囲

コンテキスト.getImageData(x, y, 幅, 高さ).data

座標(x, y) を起点に幅と高さ分のピクセルのRGBA配列を取得する
ピクセル範囲の先頭行から順に [R, G, B, A, R, G, B, A, ...] のようにRGBAが並んでいる

1ピクセル

コンテキスト.getImageData(x, y, 1, 1).data

　RGBAの取得

1ピクセル

R = RGBA配列[0]
G = RGBA配列[1]
B = RGBA配列[2]
A = RGBA配列[3]

ピクセル範囲

for (let y = 0; y < 高さ; y++)
  for (let x = 0; x < 幅; x++) {
    let i = (y * 幅 + x) * 4;

    R = RGBA配列[i]
    G = RGBA配列[i + 1]
    B = RGBA配列[i + 2]
    A = RGBA配列[i + 3]
  }