Canvas API

getContext

　getContext() メソッドは、グラフィックを描画するためのメソッドやプロパティを持つオブジェクトを返す。

"2d"

Canvas API で 2D グラフィックを描画するためのメソッドやプロパティを持つオブジェクトを返す。

"webgl"

WebGL API で 3D グラフィックを描画するためのメソッドやプロパティを持つオブジェクトを返す。

リファレンス

短形の描画

　ビットマップに対して短形を直接描画する方法は三つあります。

clearRect()

座標(x, y) を始点とする大きさ (width, height) の領域を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。

fillRect()

座標(x, y) を始点とし大きさ (width, height) の領域を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。

strokeRect()

座標(x, y) を始点とし大きさ (width, height) の領域の枠線を、現在のストロークスタイルを用いて描画します。

文字列の描画

　以下のメソッドは、文字列の描画を提供します。文字列のプロパティについては TextMetrics も参照してください。

fillText()

現在の塗りつぶしスタイルを用いて、文字の内部を塗りつぶします。

strokeText()

現在のストロークスタイルを用いて、文字の輪郭を描画します。

measureText()

TextMetrics オブジェクトを返します。

線のスタイル

　線がどのように描画されるかを設定・取得します。

lineWidth

線の幅を設定します。デフォルトは 1.0 です。

lineCap

線の末端のスタイルを設定します。設定可能な値は butt (デフォルト), round, square です。

lineJoin

2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は round, bevel, miter (デフォルト) です。

miterLimit

Miter limit を設定します。デフォルトは 10 です。

getLineDash()

現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。

setLineDash()

破線パターンを指定します。

lineDashOffset

線のどこから破線にするかを指定します。

文字列のスタイル

　以下のプロパティは、テキストがどのように配置されるかを制御します。

font

フォントを設定します。デフォルト値は 10px sans-serif です。

textAlign

テキストの揃え方を設定します。設定可能な値は以下の通りです: start (デフォルト), end, left, right or center。

textBaseline

ベースラインの揃え方を設定します。設定可能な値は以下の通りです: top, hanging, middle, alphabetic (デフォルト), ideographic, bottom。

direction

テキストの方向を指定します。設定可能な値は以下の通りです: ltr, rtl, inherit (デフォルト)。

塗りつぶしとストロークのスタイル

　塗りつぶしには図形の内部の色やスタイルの設定に、ストロークには図形の輪郭の色やスタイルの設定に使用されます。

fillStyle

図形の内側を色やスタイルで指定します。 デフォルト値は #000 (黒) です。

strokeStyle

図形の輪郭を色やスタイルで指定します。 デフォルト値は #000 (黒) です。

グラデーションとパターン

createLinearGradient()

パラメーターの座標から線に沿った線形のグラデーションを作成します。

createRadialGradient()

パラメーターの座標から2つの円の座標を利用して放射状のグラデーションを作成します。

createPattern()

指定されたイメージソース (CanvasImageSource) を利用してパターンイメージを作成します。そのパターンイメージからパラメーターの方向に繰り返します。このメソッドは CanvasPattern で出力します。

影のスタイル

shadowBlur

影のぼかしを設定します。デフォルト値は 0 です。

shadowColor

影の色を設定します。デフォルト値は完全に透明の黒です。

shadowOffsetX

横方向の影の長さを設定します。デフォルト値は 0 です。

shadowOffsetY

縦方向の影の長さを設定します。デフォルト値は 0 です。

パスの作成

　以下のメソッドはオブジェクトのパスの操作で使用できます。

beginPath()

すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。

closePath()

ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。

moveTo()

(x, y) 座標へ作成済みのサブパスの始点を移動します。

lineTo()

現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。

bezierCurveTo()

現在のパスに 3 次元のベジェ曲線を追加します。

quadraticCurveTo()

現在のパスに 2 次元のベジェ曲線を追加します。

arc()

現在のパスに円弧を追加します。

arcTo()

パラメーターの制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。

ellipse()

現在のパスに楕円形の円弧を追加します。

rect()

パラメーターの座標 (x, y) から width と height のサイズで長方形のパスを作成します。

パスを描画する

fill()

塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。

stroke()

ストロークのスタイルに基づいてサブパスを描画します。

drawFocusIfNeeded()

パラメーターで指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。

scrollPathIntoView()

現在のパスかパラメーターで指定したパスが表示範囲に入るまでスクロールします。

clip()

現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルは Canvas チュートリアルの Clipping paths をご参照ください。

isPointInPath()

パラメーターで指定した位置が現在のパスの中に含まれているか調べます。

isPointInStroke()

パラメーターで指定した位置がパスでストロークした領域の中に含まれているか調べます。

図形の変形

　CanvasRenderingContext2D のレンダリングコンテキストのオブジェクトには現在の変換行列の状態とその変換行列を操作するメソッドがあります。現在のデフォルトパスを作成したり、テキスト、図形、Path2D を描くと変換行列が適用されます。下記に紹介するメソッドは過去の事情や互換性を確保する理由で残されていて、SVGMatrix オブジェクトがその API の大部分で使用されています。将来は SVGMatrix の代わりに DOMMatrix を利用したメソッドが使用されることになります。

currentTransform

現在の変換行列 (SVGMatrix オブジェクト)。

rotate()

変換行列に回転を追加します。パラメーターの角度は時計回りをラジアン値で指定します。

scale()

キャンバスに対して X で横方向に、Y で縦方向にスケーリング変換を追加します。

translate()

キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。

transform()

現在の変換行列とパラメーターで指定した行列を乗算します。

setTransform()

現在の変換行列を単位行列にリセットしてから、パラメーターで指定した行列から transform() メソッドを実行します。

resetTransform()

現在の変換行列を単位行列にリセットします。

合成

globalAlpha

合成される前に適用されるキャンバス内の図形やイメージの透明度です。デフォルト値は 1.0 (不透明) です。

globalCompositeOperation

globalAlpha で設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。

画像の描画

drawImage()

指定したイメージを描画します。このメソッドでは指定方法が多く、大きな柔軟性を持ちます。

ピクセル操作

　ImageData も併せてご参照ください。

createImageData()

パラメーターで指定した領域から空の ImageData オブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。

getImageData()

キャンバス内の座標 (sx, sy) から 幅 sw と 高さ sh のサイズで示される基本のピクセルデータの ImageData オブジェクトを取得します。

putImageData()

パラメーターで指定した ImageData オブジェクトのデータをビットマップ上に描画します。不適切な四角形が指定された場合は、その四角形のピクセルだけが描画されます。

画像の平滑化

imageSmoothingEnabled

画像のスムージングモード。無効にすると、拡大縮小しても画像は滑らかになりません。

imageSmoothingQuality

画像のスムージングの品質を設定できます。

キャンバスの状態

CanvasRenderingContext2D レンダリングコンテキストには、様々な描画スタイルの状態（線のスタイル、塗りつぶしのスタイル、影のスタイル、テキストのスタイルの属性）が含まれています。次の方法は、その状態で作業するのに役立ちます。

save()

スタックを使用して現在の描画スタイルの状態を保存するため、restore() を使用して変更を元に戻すことができます。

restore()

save() によって保存された「状態スタック」の最後の要素に描画スタイルの状態を復元します。

canvas

HTMLCanvasElement への読み取り専用の後方参照。<canvas> 要素に関連づけられていない場合は null になる可能性があります。

キャンバスの当たり判定

addHitRegion()

ヒット領域をキャンバスに追加します。

removeHitRegion()

指定された ID のヒット領域をキャンバスから削除します。

clearHitRegions()

キャンバスからすべてのヒット領域を削除します。

フィルター

filter

CSS と SVG フィルターを Canvas に適用します。明るさを変更したり、キャンバスをぼかしたりします。

非標準 API

Blink and WebKit

　これらの API のほとんどは非推奨であり、Chrome36 の直後に削除されました。

clearShadow()

shadowColor や shadowBlur などのすべてのシャドウ設定を削除します。

drawImageFromRect()

これは、drawImage の同等のオーバーロードで冗長です。

setAlpha()

代わりに globalAlpha を使用してください。

setCompositeOperation()

代わりに globalCompositeOperation を使用してください。

setLineWidth()

代わりに lineWidth を使用してください。

setLineJoin()

代わりに lineJoin を使用してください。

setLineCap()

代わりに lineCap を使用してください。

setMiterLimit()

代わりに miterLimit を使用してください。

setStrokeColor()

代わりに strokeStyle を使用してください。

setFillColor()

代わりに fillStyle を使用してください。

setShadow()

代わりに shadowColor と shadowBlur を使用してください。

webkitLineDash

代わりに getLineDash() と setLineDash() を使用してください。

webkitLineDashOffset

代わりに lineDashOffset を使用してください。

webkitImageSmoothingEnabled

代わりに imageSmoothingEnabled を使用してください。

Blink only

isContextLost()

同じ WebGLRenderingContext メソッドに触発されて、Canvas コンテキストが失われた場合は true を返し、失われなかった場合は false を返します。

WebKit only

webkitBackingStorePixelRatio

キャンバス要素に関連するバッキングストアのサイズ。High DPI Canvas を参照してください。

webkitGetImageDataHD

HD バッキングストアを対象としていますが、キャンバス仕様から削除されています。

webkitPutImageDataHD

HD バッキングストアを対象としていますが、キャンバス仕様から削除されています。

Gecko only

Prefixed APIs

mozCurrentTransform

現在の変換行列を設定または取得します。currentTransform を参照してください。

mozCurrentTransformInverse

現在の逆変換行列を設定または取得します。

mozImageSmoothingEnabled

imageSmoothingEnabled を参照してください。

mozTextStyle

Gecko 1.9 で導入され、font プロパティを優先して非推奨になりました。

mozDrawText()

Gecko 1.9 で導入され、Gecko 7.0 から削除されました。代わりに、strokeText() または fillText() を使用してください。

mozMeasureText()

このメソッドは Gecko 1.9 で導入され、Gecko 7.0 以降では実装されていません。代わりに measureText() を使用してください。

mozPathText()

このメソッドは Gecko 1.9 で導入され、Gecko 7.0 から削除されました。

mozTextAlongPath()

このメソッドは Gecko 1.9 で導入され、Gecko 7.0 から削除されました。

Internal APIs (chrome-context only)

drawWindow()

ウィンドウの領域をキャンバスにレンダリングします。ウィンドウのビューポートの内容は、ビューポートのクリッピングとスクロールを無視してレンダリングされます。

demote()

これにより、現在ハードウェアアクセラレーションされたバックエンドを使用しているコンテキストがソフトウェアのものにフォールバックします。すべての状態を保持する必要があります。

Internet Explorer

msFillRule

使用する塗りつぶしルール。これは、偶数またはゼロ以外（デフォルト）のいずれかである必要があります。