CanvasRenderingContext2D
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
CanvasRenderingContext2D はキャンバス API のインターフェイスで、 <canvas> 要素の描画面のための二次元描画コンテキストを提供します。
図形、文字、画像、その他のオブジェクトを描画するのに使用します。
詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。 キャンバスのチュートリアルにもより多くの説明やサンプルコード、リソースがあります。
OffscreenCanvas には、レンダリングコンテキストを提供する同等のインターフェイスがあります。
オフスクリーンレンダリングコンテキストは CanvasRenderingContext2D とほぼ同じプロパティとメソッドを継承しており、詳細は OffscreenCanvasRenderingContext2D リファレンスページで説明されています。
基本的な例
CanvasRenderingContext2D インスタンスを取得するには、まず連携する HTML の <canvas> 要素が必要です。
<canvas id="my-house" width="300" height="300"></canvas>
このキャンバスの二次元描画コンテキストを取得するには、引数に '2d' を指定して getContext() を <canvas> に対して呼び出します。
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");
二次元描画コンテキストを取得した後は、好きなように描画できます。以下のコードは家を描画します。
// 線の幅を設定
ctx.lineWidth = 10;
// 壁
ctx.strokeRect(75, 140, 150, 110);
// ドア
ctx.fillRect(130, 190, 40, 60);
// 屋根
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
結果は次のようになります。
リファレンス
コンテキスト
CanvasRenderingContext2D.getContextAttributes()-
ブラウザーが使用するコンテキスト属性を格納したオブジェクトを返します。コンテキスト属性は、
HTMLCanvasElement.getContext()を使用して 2D コンテキストを生成する際にリクエストできます。 CanvasRenderingContext2D.isContextLost()-
描画コンテキストが失われた場合に
trueを返します。
矩形の描画
キャンバスに矩形を直接描画する方法は 3 つあります。
CanvasRenderingContext2D.clearRect()-
座標 (x, y) を始点とする大きさ (width, height) の矩形を、透明色 (透明な黒) で塗りつぶします。領域内に描画されていたすべてのコンテンツは消去されます。
CanvasRenderingContext2D.fillRect()-
座標 (x, y) を始点とし大きさ (width, height) の矩形を、(訳注: 現在の塗りつぶしスタイルを用いて) 塗りつぶします。
CanvasRenderingContext2D.strokeRect()-
座標 (x, y) を始点とし大きさ (width, height) の矩形の枠線を、現在のストロークスタイルを用いて描画します。
テキストの描画
以下のメソッドは、文字列の描画を提供します。文字列のプロパティについては TextMetrics も参照してください。
CanvasRenderingContext2D.fillText()-
指定されたテキストを指定された (x, y) の位置に、文字の中を塗りつぶします。
CanvasRenderingContext2D.strokeText()-
指定されたテキストを指定された (x, y) の位置に、文字の輪郭を描きます。
CanvasRenderingContext2D.measureText()-
TextMetricsオブジェクトを返します。
線のスタイル
線がどのように描画されるかを設定・取得します。
CanvasRenderingContext2D.lineWidth-
線の幅を設定します。既定値は
1.0です。 CanvasRenderingContext2D.lineCap-
線の末端のスタイルを設定します。設定可能な値は
butt(既定値),round,squareです。 CanvasRenderingContext2D.lineJoin-
2 つの直線が出会う頂点のスタイルを設定します。設定可能な値は
round,bevel,miter(既定値) です。 CanvasRenderingContext2D.miterLimit-
マイター制限を設定します。既定値は
10です。 CanvasRenderingContext2D.getLineDash()-
現在の破線パターンを格納した配列を取得します。この配列には負でない実数が偶数個含まれています。
CanvasRenderingContext2D.setLineDash()-
破線パターンを指定します。
CanvasRenderingContext2D.lineDashOffset-
線のどこから破線にするかを指定します。
テキストのスタイル
以下のプロパティは、テキストがどのように配置されるかを制御します。
CanvasRenderingContext2D.font-
フォントを設定します。既定値は
10px sans-serifです。 CanvasRenderingContext2D.textAlign-
テキストの揃え方を設定します。設定可能な値は
start(既定値),end,left,right,centerです。 CanvasRenderingContext2D.textBaseline-
ベースラインの揃え方を設定します。設定可能な値は
top,hanging,middle,alphabetic(既定値),ideographic,bottomです。 CanvasRenderingContext2D.direction-
テキストの方向を指定します。設定可能な値は
ltr,rtl,inherit(既定値) です。 CanvasRenderingContext2D.letterSpacing-
文字間です。既定値は
0pxです。 CanvasRenderingContext2D.fontKerning-
フォントのカーニングです。指定可能な値は
auto(既定値),normal,noneです。 CanvasRenderingContext2D.fontStretch-
フォントの伸ばし方です。指定可能な値は
ultra-condensed,extra-condensed,condensed,semi-condensed,normal(既定値),semi-expanded,expanded,extra-expanded,ultra-expandedです。 CanvasRenderingContext2D.fontVariantCaps-
フォントの大文字化の方式です。指定可能な値は
normal(既定値),small-caps,all-small-caps,petite-caps,all-petite-caps,unicase,titling-capsです。 CanvasRenderingContext2D.textRendering-
テキストのレンダリング方法です。指定可能な値は
auto(既定値),optimizeSpeed,optimizeLegibility,geometricPrecisionです。 CanvasRenderingContext2D.wordSpacing-
単語同士の空間です。既定値は
0pxです。 CanvasRenderingContext2D.langExperimental-
キャンバス描画コンテキストの言語を取得または設定します。
塗りつぶしとストロークのスタイル
塗りつぶしには図形の内部の色やスタイルの設定に、ストロークには図形の輪郭の色やスタイルの設定に使用されます。
CanvasRenderingContext2D.fillStyle-
図形の内側を色やスタイルで指定します。 既定値は
black(黒) です。 CanvasRenderingContext2D.strokeStyle-
図形の輪郭を色やスタイルで指定します。 既定値は
black(黒) です。
グラデーションとパターン
CanvasRenderingContext2D.createConicGradient()-
引数で表された座標で指定された点の周りに扇形グラデーションを作成します。
CanvasRenderingContext2D.createLinearGradient()-
引数で表された座標から線に沿った線形グラデーションを作成します。
CanvasRenderingContext2D.createRadialGradient()-
引数で表された座標から 2 つの円の座標を利用して放射グラデーションを作成します。
CanvasRenderingContext2D.createPattern()-
指定された画像を利用してパターンを作成します。そのパターンから引数の方向に繰り返します。このメソッドは
CanvasPatternで出力します。
影
CanvasRenderingContext2D.shadowBlur-
影のぼかしを設定します。既定値は
0です。 CanvasRenderingContext2D.shadowColor-
影の色を設定します。既定値は完全に透明の黒です。
CanvasRenderingContext2D.shadowOffsetX-
横方向の影の長さを設定します。既定値は
0です。 CanvasRenderingContext2D.shadowOffsetY-
縦方向の影の長さを設定します。既定値は
0です。
パス
以下のメソッドはオブジェクトのパスの操作で使用できます。
CanvasRenderingContext2D.beginPath()-
すでにあるサブパスのリストを消去して新しいパスの起点を作成します。パスを作成したい時にこのメソッドを利用します。
CanvasRenderingContext2D.closePath()-
ペンの場所を現在のサブパスの最初の位置に戻します。現在の位置から最初の位置まで直線を引くことになります。パスの図形が閉じていたり、まだ 1 点だけだったりする場合は、このメソッドは何も実行しません。
CanvasRenderingContext2D.moveTo()-
(x, y) 座標へ作成済みのサブパスの始点を移動します。
CanvasRenderingContext2D.lineTo()-
現在のサブパスの終点を指定した (x, y) 座標へ直線で接続します。
CanvasRenderingContext2D.bezierCurveTo()-
現在のパスに三次ベジェ曲線を追加します。
CanvasRenderingContext2D.quadraticCurveTo()-
現在のパスに二次ベジェ曲線を追加します。
CanvasRenderingContext2D.arc()-
現在のパスに円弧を追加します。
CanvasRenderingContext2D.arcTo()-
引数の制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。
CanvasRenderingContext2D.ellipse()-
現在のパスに楕円形の円弧を追加します。
CanvasRenderingContext2D.rect()-
引数の座標 (x, y) から width と height のサイズで長方形のパスを作成します。
CanvasRenderingContext2D.roundRect()-
指定された位置、幅、高さ、角の半径を持つ角丸矩形用のパスを作成します。
パスの描画
CanvasRenderingContext2D.fill()-
塗りつぶしのスタイルに基づいてサブパス内を塗りつぶします。
CanvasRenderingContext2D.stroke()-
ストロークのスタイルに基づいてサブパスを描画します。
CanvasRenderingContext2D.drawFocusIfNeeded()-
引数で指定した要素がフォーカスされた場合、このメソッドは現在のパスの周りにフォーカスリングを描画します。
CanvasRenderingContext2D.clip()-
現在のサブパスからクリッピングパスを作成します。このメソッドが実行されると、後に描画されたものがすべてそのクリッピングパスの内側にだけ描画されます。サンプルはキャンバスチュートリアルのパスのクリッピングを参照してください。
CanvasRenderingContext2D.isPointInPath()-
引数で指定した位置が現在のパスの中に含まれているか調べます。
CanvasRenderingContext2D.isPointInStroke()-
引数で指定した位置がパスでストロークした領域の中に含まれているか調べます。
座標変換
CanvasRenderingContext2D の描画コンテキストのオブジェクトには、現在の座標変換行列の状態とその座標変換行列を操作するメソッドがあります。現在の既定のパスを作成したり、テキスト、図形、Path2D を描くと座標変換行列が適用されます。以下のメソッドは、歴史的および互換性の理由から残されています。現在では API の大部分で DOMMatrix オブジェクトが使用されており、今後も代わりに使用される予定です。
CanvasRenderingContext2D.getTransform()-
コンテキストに適用されている現在の座標変換行列を取得します。
CanvasRenderingContext2D.rotate()-
座標変換行列に回転を追加します。引数の角度は時計回りをラジアン値で指定します。
CanvasRenderingContext2D.scale()-
キャンバスに対して X で横方向に、Y で縦方向に拡大縮小変換を追加します。
CanvasRenderingContext2D.translate()-
キャンバスと指定した原点に対して X で横方向に、Y で縦方向にグリッド状で移動して、平行移動の変形を追加します。
CanvasRenderingContext2D.transform()-
現在の座標変換行列と引数で指定した行列を乗算します。
CanvasRenderingContext2D.setTransform()-
現在の座標変換行列を恒等行列にリセットしてから、引数で指定した行列から
transform()メソッドを実行します。 CanvasRenderingContext2D.resetTransform()-
現在の変換行列を恒等行列にリセットします。
合成
CanvasRenderingContext2D.globalAlpha-
合成される前に適用されるキャンバス内の図形やイメージの透明度です。既定値は
1.0(不透明) です。 CanvasRenderingContext2D.globalCompositeOperation-
globalAlphaで設定した透明度を利用して、これまで描画された図形やイメージの描画方法を設定します。
画像の描画
CanvasRenderingContext2D.drawImage()-
指定したイメージを描画します。このメソッドでは指定方法が多く、大きな柔軟性を持ちます。
ピクセル操作
ImageData オブジェクトも参照してください。
CanvasRenderingContext2D.createImageData()-
引数で指定したサイズの空の
ImageDataオブジェクトを作成します。そのオブジェクトはすべてのピクセルが透明な黒で構成されています。 CanvasRenderingContext2D.getImageData()-
キャンバス内の座標 (sx, sy) から 幅 sw と 高さ sh のサイズで示される部分に対応するピクセルデータの
ImageDataオブジェクトを取得します。 CanvasRenderingContext2D.putImageData()-
引数で指定した
ImageDataオブジェクトのデータをビットマップ上に描画します。再描画対象の四角形が指定された場合は、その四角形のピクセルだけが描画されます。
画像の平滑化
CanvasRenderingContext2D.imageSmoothingEnabledExperimental-
画像平滑化モードです。無効の場合、画像を拡大縮小しても平滑化されません。
CanvasRenderingContext2D.imageSmoothingQualityExperimental-
画像平滑化の品質を設定します。
キャンバスの状態
CanvasRenderingContext2D 描画コンテキストは、様々な描画スタイルの状態（ラインスタイル、フィルスタイル、シャドウスタイル、テキストスタイルの属性）を含んでいます。以下のメソッドは、その状態を操作するのに役立ちます。
CanvasRenderingContext2D.save()-
現在の描画スタイルの状態をスタックを用いて保存し、
restore()を用いて変更した部分を元に戻すことができるようにします。 CanvasRenderingContext2D.restore()-
描画スタイルの状態を
save()によって保存された '状態スタック' の最後の要素に復元します。 CanvasRenderingContext2D.canvas-
HTMLCanvasElementへの読み取り専用の後方参照。<canvas>要素と関連付けられていない場合、nullになる可能性があります。 CanvasRenderingContext2D.getContextAttributes()-
ブラウザーが使用するコンテキスト属性を格納したオブジェクトを返します。コンテキスト属性は、
HTMLCanvasElement.getContext()を使用して 2D コンテキストを生成する際にリクエストできます。 CanvasRenderingContext2D.reset()-
レンダリングコンテキストをリセットします。これには、バッキングバッファー、描画状態スタック、パス、およびスタイルが含まれます。
CanvasRenderingContext2D.isContextLost()Experimental-
レンダリングコンテキストが失われた場合に
trueを返します。
フィルター
CanvasRenderingContext2D.filterExperimental-
キャンバスの明るさやぼかし具合を変えるなど、 CSS や SVG のフィルターを適用します。
仕様書
| Specification |
|---|
| HTML # 2dcontext |