Canvas API メソッドとプロパティ

ピクセル操作

メソッド名/プロパティ 説明
getImageData(x,y,w,h) 指定領域のピクセルデータを取得する. 戻り値は ImageData オブジェクト
putImageData(imageData, dx, dy) 指定した ImageData をキャンバスに描画する.
createImageData(w, h) 幅と高さを指定して空のピクセルデータを作成する.
toDataURL() キャンバスの内容を Base64 エンコードされた画像データに変換する.

パスやクリップ操作

メソッド名/プロパティ 説明
clip() 現在のパスをクリッピング領域として設定する.
isPointInPath(x, y) 指定された点が現在のパス内にあるかどうかを判定する.
isPointInStroke(x, y) 指定された点が現在のパスの線上にあるかどうかを判定する.

基本的な描画操作

メソッド名/プロパティ 説明
moveTo(x, y) 新しい描画の開始位置を設定する.
lineTo(x, y) 現在の位置から指定の位置まで線を引く.
stroke() 線を描画する.
fill() パスの内部を塗りつぶする.
lineWidth 線の太さを指定する.
strokeStyle 線の色を指定する.
fillStyle 塗りつぶしの色を指定する.
beginPath() 新しいパスを開始する.
closePath() 現在のパスを閉じる.

図形の描画

メソッド名/プロパティ 説明
rect(x, y, w, h) 長方形を指定の位置とサイズで描く.
arc(x, y, r, startAngle, endAngle, counterclockwise) 円弧や円を描く.
arcTo(x1, y1, x2, y2, radius) 2つの点をつなぐ円弧を描く.
ellipse(x, y, rx, ry, rotation, startAngle, endAngle, counterclockwise) 楕円を描描く.
clearRect(x, y, w, h) 指定した領域を消去(透明に)
fillRect(x, y, w, h) 塗りつぶされた長方形を描く.
strokeRect(x, y, w, h) 枠線だけの長方形を描く.