CanvasRenderingContext2D

Canvas APICanvasRenderingContext2D インターフェイスは、<canvas> 要素に描画するための 2D レンダリングコンテキストを提供します。図形、文字、画像、その他のオブジェクトを描画するのに使用します。

詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。Canvas チュートリアル にもより多くの説明やサンプルコード、リソースがあります。

基本的な例

CanvasRenderingContext2D インスタンスを取得するには、まず連携する HTML <canvas> 要素が必要です。

<canvas id="my-house" width="300" height="300"></canvas>

この canvas の 2D レンダリングコンテキストを取得するには、引数に '2d' を指定して <canvas>getContext() (en-US) を呼び出します。

const canvas = document.getElementById('my-house');
const ctx = canvas.getContext('2d');

2D レンダリングコンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

結果は次のようになります。

リファレンス

矩形の描画

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

CanvasRenderingContext2D.clearRect()
座標(x, y) を始点とする大きさ (width, height) の領域を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。
CanvasRenderingContext2D.fillRect()
座標(x, y) を始点とし大きさ (width, height) の領域を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。
CanvasRenderingContext2D.strokeRect()
座標(x, y) を始点とし大きさ (width, height) の領域の枠線を、現在のストロークスタイルを用いて描画します。

文字列の描画

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

CanvasRenderingContext2D.fillText()
現在の塗りつぶしスタイルを用いて、文字の内部を塗りつぶします。
CanvasRenderingContext2D.strokeText()
現在のストロークスタイルを用いて、文字の輪郭を描画します。
CanvasRenderingContext2D.measureText()
TextMetrics (en-US) オブジェクトを返します。

線のスタイル

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

CanvasRenderingContext2D.lineWidth (en-US)
線の幅を設定します。デフォルトは 1.0 です。
CanvasRenderingContext2D.lineCap
線の末端のスタイルを設定します。設定可能な値は butt (デフォルト), round, square です。
CanvasRenderingContext2D.lineJoin (en-US)
2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は round, bevel, miter (デフォルト) です。
CanvasRenderingContext2D.miterLimit (en-US)
Miter limit を設定します。デフォルトは 10 です。
CanvasRenderingContext2D.getLineDash() (en-US)
現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。
CanvasRenderingContext2D.setLineDash()
破線パターンを指定します。
CanvasRenderingContext2D.lineDashOffset (en-US)
線のどこから破線にするかを指定します。

文字列のスタイル

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

CanvasRenderingContext2D.font
フォントを設定します。デフォルト値は 10px sans-serif です。
CanvasRenderingContext2D.textAlign
テキストの揃え方を設定します。設定可能な値は以下の通りです: start (デフォルト), end, left, right or center
CanvasRenderingContext2D.textBaseline
ベースラインの揃え方を設定します。設定可能な値は以下の通りです: top, hanging, middle, alphabetic (デフォルト), ideographic, bottom
CanvasRenderingContext2D.direction
テキストの方向を指定します。設定可能な値は以下の通りです: ltr, rtl, inherit (デフォルト)。

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

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

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

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

CanvasRenderingContext2D.createLinearGradient() (en-US)
パラメーターの座標から線に沿った線形のグラデーションを作成します。
CanvasRenderingContext2D.createRadialGradient() (en-US)
パラメーターの座標から2つの円の座標を利用して放射状のグラデーションを作成します。
CanvasRenderingContext2D.createPattern() (en-US)
指定されたイメージソース (CanvasImageSource (en-US)) を利用してパターンイメージを作成します。そのパターンイメージからパラメーターの方向に繰り返します。このメソッドは CanvasPattern で出力します。

影のスタイル

CanvasRenderingContext2D.shadowBlur (en-US)
影のぼかしを設定します。デフォルト値は 0 です。
CanvasRenderingContext2D.shadowColor (en-US)
影の色を設定します。デフォルト値は完全に透明の黒です。
CanvasRenderingContext2D.shadowOffsetX (en-US)
横方向の影の長さを設定します。デフォルト値は 0 です。
CanvasRenderingContext2D.shadowOffsetY (en-US)
縦方向の影の長さを設定します。デフォルト値は 0 です。

パスの作成

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

CanvasRenderingContext2D.beginPath()
すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。
CanvasRenderingContext2D.closePath()
ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。
CanvasRenderingContext2D.moveTo()
(x, y) 座標へ作成済みのサブパスの始点を移動します。
CanvasRenderingContext2D.lineTo()
現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。
CanvasRenderingContext2D.bezierCurveTo() (en-US)
現在のパスに 3 次元のベジェ曲線を追加します。
CanvasRenderingContext2D.quadraticCurveTo() (en-US)
現在のパスに 2 次元のベジェ曲線を追加します。
CanvasRenderingContext2D.arc()
現在のパスに円弧を追加します。
CanvasRenderingContext2D.arcTo()
パラメーターの制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。
CanvasRenderingContext2D.ellipse()
現在のパスに楕円形の円弧を追加します。
CanvasRenderingContext2D.rect()
パラメーターの座標 (x, y) から widthheight のサイズで長方形のパスを作成します。

パスを描画する

CanvasRenderingContext2D.fill() (en-US)
塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。
CanvasRenderingContext2D.stroke()
ストロークのスタイルに基づいてサブパスを描画します。
CanvasRenderingContext2D.drawFocusIfNeeded()
パラメーターで指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。
CanvasRenderingContext2D.scrollPathIntoView() (en-US)
現在のパスかパラメーターで指定したパスが表示範囲に入るまでスクロールします。
CanvasRenderingContext2D.clip() (en-US)
現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルは Canvas チュートリアルの Clipping paths をご参照ください。
CanvasRenderingContext2D.isPointInPath() (en-US)
パラメーターで指定した位置が現在のパスの中に含まれているか調べます。
CanvasRenderingContext2D.isPointInStroke() (en-US)
パラメーターで指定した位置がパスでストロークした領域の中に含まれているか調べます。

図形の変形

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

CanvasRenderingContext2D.currentTransform (en-US)
現在の変換行列 (SVGMatrix (en-US) オブジェクト)。
CanvasRenderingContext2D.rotate() (en-US)
変換行列に回転を追加します。パラメーターの角度は時計回りをラジアン値で指定します。
CanvasRenderingContext2D.scale()
キャンバスに対して X で横方向に、Y で縦方向にスケーリング変換を追加します。
CanvasRenderingContext2D.translate() (en-US)
キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。
CanvasRenderingContext2D.transform() (en-US)
現在の変換行列とパラメーターで指定した行列を乗算します。
CanvasRenderingContext2D.setTransform() (en-US)
現在の変換行列を単位行列にリセットしてから、パラメーターで指定した行列から transform() メソッドを実行します。
CanvasRenderingContext2D.resetTransform() (en-US)
現在の変換行列を単位行列にリセットします。

合成

CanvasRenderingContext2D.globalAlpha (en-US)
合成される前に適用されるキャンバス内の図形やイメージの透明度です。デフォルト値は 1.0 (不透明) です。
CanvasRenderingContext2D.globalCompositeOperation
globalAlpha で設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。

画像の描画

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

ピクセル操作

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

CanvasRenderingContext2D.createImageData() (en-US)
パラメーターで指定した領域から空の ImageData オブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。
CanvasRenderingContext2D.getImageData() (en-US)
キャンバス内の座標 (sx, sy) から 幅 sw と 高さ sh のサイズで示される基本のピクセルデータの ImageData オブジェクトを取得します。
CanvasRenderingContext2D.putImageData() (en-US)
パラメーターで指定した ImageData オブジェクトのデータをビットマップ上に描画します。不適切な四角形が指定された場合は、その四角形のピクセルだけが描画されます。

画像の平滑化

CanvasRenderingContext2D.imageSmoothingEnabled
Image smoothing mode; if disabled, images will not be smoothed if scaled.
CanvasRenderingContext2D.imageSmoothingQuality (en-US)
Allows you to set the quality of image smoothing.

キャンバスの状態

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

CanvasRenderingContext2D.save()
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
CanvasRenderingContext2D.restore() (en-US)
Restores the drawing style state to the last element on the 'state stack' saved by save().
CanvasRenderingContext2D.canvas
A read-only back-reference to the HTMLCanvasElement. Might be null if it is not associated with a <canvas> element.

キャンバスの当たり判定

CanvasRenderingContext2D.addHitRegion()
Adds a hit region to the canvas.
CanvasRenderingContext2D.removeHitRegion()
Removes the hit region with the specified id from the canvas.
CanvasRenderingContext2D.clearHitRegions()
Removes all hit regions from the canvas.

フィルター

CanvasRenderingContext2D.filter (en-US)
Applys a CSS and SVG filter to the Canvas, e.g. to change the brightness or blur the canvas.

非標準 API

Most of these APIs are deprecated and were removed shortly after Chrome 36.

これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.clearShadow()
Removes all shadow settings like CanvasRenderingContext2D.shadowColor (en-US) and CanvasRenderingContext2D.shadowBlur (en-US).
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.drawImageFromRect()
This is redundant with an equivalent overload of drawImage.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setAlpha()
Use CanvasRenderingContext2D.globalAlpha (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setCompositeOperation()
Use CanvasRenderingContext2D.globalCompositeOperation instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setLineWidth()
Use CanvasRenderingContext2D.lineWidth (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setLineJoin()
Use CanvasRenderingContext2D.lineJoin (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setLineCap()
Use CanvasRenderingContext2D.lineCap instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setMiterLimit()
Use CanvasRenderingContext2D.miterLimit (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setStrokeColor()
Use CanvasRenderingContext2D.strokeStyle instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setFillColor()
Use CanvasRenderingContext2D.fillStyle instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.setShadow()
Use CanvasRenderingContext2D.shadowColor (en-US) and CanvasRenderingContext2D.shadowBlur (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitLineDash
Use CanvasRenderingContext2D.getLineDash() (en-US) and CanvasRenderingContext2D.setLineDash() instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitLineDashOffset
Use CanvasRenderingContext2D.lineDashOffset (en-US) instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitImageSmoothingEnabled
Use CanvasRenderingContext2D.imageSmoothingEnabled instead.
CanvasRenderingContext2D.isContextLost()
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.

WebKit only

これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitBackingStorePixelRatio
The backing store size in relation to the canvas element. See High DPI Canvas.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitGetImageDataHD
Intended for HD backing stores, but removed from canvas specifications.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.webkitPutImageDataHD
Intended for HD backing stores, but removed from canvas specifications.

Gecko only

Prefixed APIs

CanvasRenderingContext2D.mozCurrentTransform
Sets or gets the current transformation matrix, see CanvasRenderingContext2D.currentTransform (en-US)
CanvasRenderingContext2D.mozCurrentTransformInverse
Sets or gets the current inversed transformation matrix. 
CanvasRenderingContext2D.mozImageSmoothingEnabled
See CanvasRenderingContext2D.imageSmoothingEnabled.
CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font property.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.mozDrawText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use CanvasRenderingContext2D.strokeText() or CanvasRenderingContext2D.fillText() instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
これは廃止された API であり、動作は保証されていません。 CanvasRenderingContext2D.mozTextAlongPath()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.

Internal APIs (chrome-context only)

CanvasRenderingContext2D.drawWindow() (en-US)
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
CanvasRenderingContext2D.demote()
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.

Internet Explorer

CanvasRenderingContext2D.msFillRule
The fill rule to use. This must be one of evenodd or nonzero (default).

仕様

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D の定義
現行の標準

ブラウザー実装状況

BCD tables only load in the browser

関連項目