★Canvasリファレンス

パス

context . beginPath() …… 現在のパスをリセットする
context . moveTo(x, y) …… 新しいサブパスの開始点を座標指定する
context . closePath() …… 最終座標と開始座標を結んでパスを閉じる

直線（多角形）

context . lineTo(x, y) …… 直前の座標と指定座標を結ぶ直線を引く

ベジェ曲線

context . quadraticCurveTo(cpx, cpy, x, y) …… 2次ベジェ曲線を引く
context . bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) …… 3次ベジェ曲線を引く

円と円弧

context . arcTo(x1, y1, x2, y2, radius) …… 直前の座標と直線でつながる円弧を作成する
context . arc(x, y, radius, startAngle, endAngle [, anticlockwise ] ) …… 円弧を作成する

四角形

context . rect(x, y, w, h) …… 四角形を作成する

パスのスタイル

context . fill() …… 現在の塗りつぶしスタイルでサブパスを塗りつぶす
context . stroke() …… 現在の線スタイルでサブパスを輪郭表示する

パスで切り抜き

context . clip() …… パスで切り抜き（クリッピング）する

パスの確認

context . isPointInPath(x, y) …… 座標がパスの内側にあるかどうかを確認する

スタイル指定

context . strokeStyle = “色・グラデーション・パターン” …… 線・輪郭の色やスタイルを指定する
context . fillStyle = “色・グラデーション・パターン” …… 塗りつぶしの色やスタイルを指定する

グラデーション

gradient . addColorStop(offset, color) …… グラデーション色を追加する
gradient = context . createLinearGradient(x0, y0, x1, y1) …… 線形グラデーションを指定する
gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) …… 円形グラデーションを指定する

背景パターン

pattern = context . createPattern(image, repetition) …… 背景パターンとその繰り返し方法を指定する

テキスト描画

context . fillText(text, x, y [, maxWidth ] ) …… 塗りつぶしのテキストを指定座標に描画する
context . strokeText(text, x, y [, maxWidth ] ) …… 輪郭のテキストを指定座標に描画する

テキスト属性の指定

context . font = “スタイル・サイズ・種類” …… フォントのスタイル・サイズ・種類を指定する
context . textAlign = “揃え位置” …… テキストの揃え位置を指定する
context . textBaseline = “ベースラインの位置” …… ベースラインの位置を指定する

テキスト描画の測定

metrics = context . measureText(text) …… テキストの描画幅を測定する
metrics . width …… テキストの描画幅を表す

ImageDataオブジェクトの操作

imagedata = context . createImageData(sw, sh) …… ImageDataオブジェクトを生成する
imagedata = context . createImageData(imagedata) …… ImageDataオブジェクトを生成する
imagedata = context . getImageData(sx, sy, sw, sh) …… 指定範囲のImageDataオブジェクトを取得する
context . putImageData(imagedata, dx, dy [, dirtyX, dirtyY, dirtyWidth, dirtyHeight ]) …… ImageDataオブジェクトを描画する

ImageDataオブジェクトの属性

imagedata . width …… ImageDataオブジェクトの幅を表す
imagedata . height …… ImageDataオブジェクトの高さを表す
imagedata . data …… RGBA順の一次配列データを返す