Widely available すべての主要ブラウザで対応済み。安心して使用可能。

2D canvas

メモ: この機能はウェブワーカー内で利用可能です。

CanvasGradient インターフェイスは、グラデーションを記述する不透明オブジェクトを表します。 CanvasRenderingContext2D.createLinearGradient()、CanvasRenderingContext2D.createConicGradient()、CanvasRenderingContext2D.createRadialGradient() のいずれかのメソッドから返されます。

fillStyle または strokeStyle として使用することができます。

Canvas・グラフィクス

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
CanvasGradient
1
12
1.5
2
18
1
addColorStop

CanvasGradient.addColorStop() メソッドは、オフセット (offset) および色 (color) に基づいて、指定されたキャンバスグラデーションに新しい色経由点を追加します。
1
12
1.5
2
18
1
CanvasPattern

CanvasPattern インターフェイスは、画像、キャンバス、動画をもとに生成される不透明オブジェクトを表し、CanvasRenderingContext2D.createPattern() メソッドによって作成されます。
1
12
1.5
2
18
1
setTransform

CanvasPattern.setTransform() メソッドは、パターンの変換行列として DOMMatrix オブジェクトを使用し、パターンにこれを実行します。
68
79
33
11.1
68
11.3
setTransform (dommatrix)

DOMMatrix2DInit` に似たオブジェクトのパラメータを受け取る。
68
79
79
11.1
68
11.3
CanvasRenderingContext2D

CanvasRenderingContext2D はキャンバス API のインターフェイスで、 canvas 要素の描画面のための二次元描画コンテキストを提供します。 図形、文字、画像、その他のオブジェクトを描画するのに使用します。
1
12
1.5
2
18
1
arc

CanvasRenderingContext2D.arc() はキャンバス 2D API のメソッドで、サブパスに円弧を加えます。
1
12
1.5
3
18
1
arcTo

CanvasRenderingContext2D.arcTo() はキャンバス 2D APIのメソッドで、制御点と半径を指定して現在のサブパスに円弧を追加します。 円弧は、例えば始点と制御点が一直線上にある場合など、必要に応じてパスの最新点に自動的に直線で接続されます。
1
12
1.5
2
18
1
beginPath

CanvasRenderingContext2D.beginPath() はキャンバス 2D API のメソッドで、サブパスのリストを空にすることにより新しいパスを開始します。新しいパスを作成したい場合は、このメソッドを呼び出してください。
1
12
1.5
2
18
1
bezierCurveTo

CanvasRenderingContext2D.bezierCurveTo() は キャンバス2D API のメソッドで、現在のサブパスに 3 次ベジェ曲線を追加します。このメソッドでは 3 つの点が要求されます。最初の 2 つは制御点であり、 3 つ目は終了点です。始点は現在のパスの最新の点で、ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更することができます。
1
12
1.5
2
18
1
canvas

CanvasRenderingContext2D.canvas はキャンバス API の一部で、このコンテキストに関連付けられた HTMLCanvasElement オブジェクトへの読み取り専用の参照です。 canvas に関連づけられていない場合は null になることがあります。
1
12
1.5
3
18
1
clearRect

CanvasRenderingContext2D.clearRect() はキャンバス 2D API のメソッドで、矩形領域のピクセルを、透明な黒に設定することで消去します。
1
12
1.5
2
18
1
clip

CanvasRenderingContext2D.clip() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在のクリッピング領域に変更します。前回のクリッピング領域があれば、現在のパスまたは指定されたパスと交差して新しいクリッピング領域を作成します。
1
12
1.5
2
18
1
clip (path parameter)

path`パラメータ
36
14
31
7
36
7
closePath

CanvasRenderingContext2D.closePath() はキャンバス 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、 1 つしか点がなかったりした場合は、この関数は何もしません。
1
12
1.5
2
18
1
createImageData

Canvas 2D API の CanvasRenderingContext2D.createImageData() メソッドは、解像度を指定して新しい空の ImageData オブジェクトを生成します。新しいオブジェクトのすべてのピクセルは透明な黒です。
2
12
3.5
4
18
3.2
createLinearGradient

CanvasRenderingContext2D.createLinearGradient() は Canvas 2D API のメソッドで、指定された2つの座標を結ぶ直線に沿ってグラデーションを作成します。
1
12
1.5
2
18
1
createPattern

CanvasRenderingContext2D.createPattern() はキャンバス 2D API のメソッドで、指定された画像と繰り返しを使ってパターンを作成します。 このメソッドは CanvasPattern を返します。
1
12
1.5
2
18
1
createRadialGradient

CanvasRenderingContext2D.createRadialGradient() はキャンバス 2D API のメソッドで、2 つの円のサイズと座標を使って放射グラデーションを作成します。
1
12
1.5
2
18
1
direction

CanvasRenderingContext2D.direction はキャンバス 2D API のプロパティで、テキストを描画する際に使用する現在の書字方向を指定します。
77
79
101
9
77
9
drawFocusIfNeeded

CanvasRenderingContext2D.drawFocusIfNeeded() はキャンバス 2D API のメソッドで、引数で与えられた要素にフォーカスが当たった時に、現在のパスもしくは指定されたパスの周りにフォーカスリングを描画します。
37
14
32
8
37
8
drawFocusIfNeeded (path parameter)

path`パラメータ
37
14
8
37
8
drawImage

Canvas 2D API の CanvasRenderingContext2D.drawImage() メソッドは、キャンバスに画像を描画するいくつかの方法を提供します。
1
12
1.5
2
18
1
drawImage (ImageBitmap source image)

ソース画像としてのImageBitmap
50
79
42
15
50
15
ellipse

CanvasRenderingContext2D.ellipse() はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。
31
13
48
9
31
9
fill

CanvasRenderingContext2D.fill() はキャンバス 2D API のメソッドで、現在のパスまたは指定されたパスを現在の CanvasRenderingContext2D.fillStyle で塗りつぶします。
1
12
1.5
2
18
1
fill (path parameter)

path`パラメータ
36
14
31
7
36
7
fillRect

CanvasRenderingContext2D.fillRect() はキャンバス 2D API のメソッドで、塗りつぶした矩形を現在の CanvasRenderingContext2D.fillStyle に基づいて描きます。
1
12
1.5
2
18
1
fillStyle

CanvasRenderingContext2D.fillStyle はキャンバス 2D API のプロパティで、図形の内側を塗りつぶすために使用する色、グラデーション、またはパターンを指定します。既定値は #000 (黒色)です。
1
12
1.5
2
18
1
fillText

CanvasRenderingContext2D の fillText() はキャンバス 2D API のメソッドで、指定した座標にテキスト文字列を描画し、その文字を現在の CanvasRenderingContext2D.fillStyle で塗りつぶします。オプションの引数で、描画されるテキストの最大幅を指定すると、user agentは、この幅に収まるようにテキストを圧縮したり、フォントサイズを縮小したりします。
2
12
3.5
4
18
3.2
filter

CanvasRenderingContext2D.filter はキャンバス 2D API のプロパティで、ぼかしやグレースケール化などのフィルター効果を提供します。 これは CSS の filter プロパティに似ており、同じ値を受け付けます。
52
79
49
18
52
18
font

CanvasRenderingContext2D.font はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS の font の記述子と同じ構文を用います。
2
12
3.5
18.4
18
18.4
fontKerning

CanvasRenderingContext2D.fontKerning はキャンバス API のプロパティで、フォントのカーニング情報をどのように使用するかを指定します。
99
99
104
99
fontStretch

CanvasRenderingContext2D.fontStretch はキャンバス API のプロパティで、テキストを描画するときにフォントをどのように拡張・縮小できるかを指定します。
99
99
117
99
fontVariantCaps

CanvasRenderingContext2D.fontVariantCaps はキャンバス API のプロパティで、描画するテキストの大文字化を変更します。
99
99
117
99
getContextAttributes

CanvasRenderingContext2D.getContextAttributes() メソッドは、このコンテキストで使用されている属性を含むオブジェクトを返します。
73
79
117
15
73
15
getImageData

CanvasRenderingContext2D の getImageData() は Canvas 2D API のメソッドで、キャンバスの指定の部分に対応するピクセルデータを表す ImageData オブジェクトを返します。
2
12
2
4
18
3.2
getLineDash

getLineDash() はキャンバス 2D API の CanvasRenderingContext2D インターフェイスのメソッドで、現在の破線パターンを取得します。
23
12
27
7
25
7
getTransform

CanvasRenderingContext2D.getTransform() はキャンバス 2D API のメソッドで、このコンテキストに適用されている現在の変換行列を取得します。
68
79
70
11.1
68
11.3
globalAlpha

CanvasRenderingContext2D.globalAlpha はキャンバス 2D API のプロパティで、図形や画像をキャンバスに描画する際に適用されるアルファ値（透明度）を設定します。
1
12
1.5
2
18
1
globalCompositeOperation

CanvasRenderingContext2D.globalCompositeOperation はキャンバス 2D API のプロパティで、新たな図形を描くときに適用する合成演算の種類を定めます。
1
12
1.5
2
18
1
imageSmoothingEnabled

imageSmoothingEnabled は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。変倍された画像を平滑化するか (true、既定値) またはしないか (false) を決定します。 imageSmoothingEnabled プロパティを取得すると、最後に設定された値が返されます。
30
15
51
9.1
30
9.3
imageSmoothingQuality

imageSmoothingQuality は CanvasRenderingContext2D インターフェイスのプロパティで、キャンバス API の一部です。画像の平滑化の品質を設定します。
54
79
9.1
54
9.3
isPointInPath

CanvasRenderingContext2D.isPointInPath() はキャンバス 2D API のメソッドで、指定された点が現在のパスに含まれているかどうかを報告します。
1
12
2
3.1
18
2
isPointInPath (path parameter)

path`パラメータ
36
14
31
7
36
7
isPointInStroke

CanvasRenderingContext2D.isPointInStroke() はキャンバス 2D API のメソッドで、指定された点がパスのストロークで囲まれた領域内にあるかどうかを報告します。
26
79
19
7
26
7
isPointInStroke (path parameter)

path`パラメータ
36
79
31
7
36
7
lang
実験的

CanvasRenderingContext2D.lang はキャンバス 2D API のプロパティで、このキャンバス描画コンテキストの言語を取得または設定します。
136
136
136
letterSpacing

CanvasRenderingContext2D.letterSpacing はキャンバス API のプロパティで、テキストを描画する際の字間を指定します。
99
99
115
18.4
99
18.4
lineCap

CanvasRenderingContext2D.lineCap はキャンバス 2D API のプロパティで、描く線の端点の形状を設定します。
1
12
1.5
2
18
1
lineDashOffset

CanvasRenderingContext2D.lineDashOffset はキャンバス 2D API のプロパティで、破線のオフセット、または「位相」を設定します。
23
12
27
7
25
7
lineJoin

CanvasRenderingContext2D.lineJoin はキャンバス 2D API のプロパティで、 2 つの線分が接する部分で使用する形状を決定します。
1
12
1.5
2
18
1
lineTo

CanvasRenderingContext2D の lineTo() はキャンバス 2D API のメソッドで、現在のサブパスに対して、その終点から指定された (x, y) 座標に向けて直線を追加します。
1
12
1.5
2
18
1
lineWidth

CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、線の太さを設定します。
1
12
1.5
2
18
1
measureText

CanvasRenderingContext2D.measureText() メソッドは、測定したテキストの情報（例えば幅など）を持つ TextMetrics オブジェクトを返します。
2
12
3.5
4
18
3.2
miterLimit

CanvasRenderingContext2D.lineWidth はキャンバス 2D API のプロパティで、マイター制限の比率を設定します。
1
12
1.5
2
18
1
moveTo

CanvasRenderingContext2D.moveTo() はキャンバス 2D API のメソッドで、新しいサブパスの始点を (x, y) 座標に移動します。
1
12
1.5
2
18
1
putImageData

Canvas 2D API の CanvasRenderingContext2D.putImageData() メソッドは、指定の ImageData オブジェクトのデータをキャンバスに描画します。更新対象の矩形が指定された場合は、その矩形内のピクセルのみが描画されます。このメソッドは、キャンバスの変換行列の影響を受けません。
2
12
2
4
18
3.2
quadraticCurveTo

CanvasRenderingContext2D.quadraticCurveTo() はキャンバス 2D API のメソッドで、現在のサブパスに二次ベジェ曲線を追加します。2 つの点が要求され、1 つ目の点は制御点、2 つ目の点は終点です。始点は現在のパスにおける最後の点であり、二次ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更できます。
1
12
1.5
3
18
1
rect

CanvasRenderingContext2D.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
1
12
1.5
2
18
1
resetTransform

CanvasRenderingContext2D.resetTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセットします。
31
79
36
10.1
31
10.3
restore

CanvasRenderingContext2D.restore() はキャンバス 2D API のメソッドで、描画状態スタックの最上位の項目をポップすることで、直近に保存されたキャンバス状態を復元します。保存された状態がない場合、このメソッドは何も行いません。
1
12
1.5
2
18
1
rotate

CanvasRenderingContext2D.rotate() はキャンバス 2D API のメソッドで、座標変換行列に回転を追加します。
1
12
1.5
2
18
1
save

CanvasRenderingContext2D.save() はキャンバス 2D API のメソッドで、現在の状態をスタックにプッシュすることで、キャンバス全体の状態を保存します。
1
12
1.5
2
18
1
scale

CanvasRenderingContext2D.scale() はキャンバス 2D API のメソッドで、キャンバス上の単位を縦方向および横方向に拡縮する座標変換を適用させます。
1
12
1.5
2
18
1
setLineDash

setLineDash() はキャンバス 2D API の CanvasRenderingContext2D インターフェイスのメソッドで、線を描画するときに使用される破線のパターンを設定します。 これは描画する線とその隙間の長さの値を交互に指定する配列を使用します。
23
12
27
7
25
7
setTransform

CanvasRenderingContext2D.setTransform() はキャンバス 2D API のメソッドで、現在の座標変換を恒等行列にリセット（上書き）した後、このメソッドの引数で記述された座標変換を呼び出します。これにより、コンテキストの変倍、回転、移動、歪めを行うことができます。
2
12
3
4
18
3.2
setTransform (matrix parameter)

行列オブジェクトをパラメータとして受け取る
68
79
70
11.1
68
11.3
shadowBlur

Canvas 2D API の CanvasRenderingContext2D.shadowBlur プロパティは、影にかかるぼかしの量を設定します。デフォルトは 0 (ぼかしなし) です。
1
12
1.5
2
18
1
shadowColor

Canvas 2D API の CanvasRenderingContext2D.shadowColor プロパティは、影の色を設定します。
1
12
1.5
2
18
1
shadowOffsetX

Canvas 2D API の CanvasRenderingContext2D.shadowOffsetX プロパティは、影を横方向にずらす距離を設定します。
1
12
1.5
2
18
1
shadowOffsetY

Canvas 2D API の CanvasRenderingContext2D.shadowOffsetY は、影を縦方向にずらす距離を設定します。
1
12
1.5
2
18
1
stroke

CanvasRenderingContext2D.stroke() はキャンバス 2D API のメソッドで、現在のあるいは渡されたパスを、現在の線のスタイルで描画します。
1
12
1.5
2
18
1
stroke (path parameter)

path`パラメータ
36
14
31
7
36
7
strokeRect

CanvasRenderingContext2D.strokeRect() はキャンバス 2D API のメソッドで、矩形の輪郭を現在の CanvasRenderingContext2D.strokeStyle とその他のコンテキスト設定によって描画します。
1
12
1.5
2
18
1
strokeStyle

CanvasRenderingContext2D.strokeStyle はキャンバス 2D API のプロパティで、図形の辺（輪郭）に使用する色、グラデーション、またはパターンを指定します。既定値は #000 （黒色）です。
1
12
1.5
2
18
1
strokeText

CanvasRenderingContext2D の strokeText() メソッドはキャンバス 2D API の一部であり、テキスト文字列の文字の輪郭を指定した座標に描画します。オプションの引数で、描画されるテキストの最大幅を指定することができます。user agentはこの幅を実現するために、テキストを圧縮したり、フォントサイズを縮小したりします。
2
12
3.5
4
18
3.2
textAlign

CanvasRenderingContext2D.textAlign はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキスト配置を指定します。
2
12
3.5
4
18
3.2
textBaseline

CanvasRenderingContext2D.textBaseline はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキストのベースライン（基準線）を指定します。
2
12
3.5
4
18
3.2
textRendering

CanvasRenderingContext2D.textRendering はキャンバス API のプロパティで、テキストを描画するときに何を最適化するかについての情報をレンダリングエンジンに提供します。
99
99
116
99
transform

CanvasRenderingContext2D.transform() はキャンバス 2D API のメソッドで、このAPIは、現在の座標変換をこのメソッドの引数で指定された行列で乗算します。これにより、コンテキストの変倍、回転、移動、歪めの座標変換を行うことができます。
1
12
3
3.1
18
2
translate

CanvasRenderingContext2D.translate() はキャンバス 2D API のメソッドで、現在の座標変換行列に移動の座標変換を追加します。
1
12
1.5
2
18
1
wordSpacing

CanvasRenderingContext2D.wordSpacing はキャンバス API のプロパティで、テキストを描画する際の単語間の空間を指定します。
99
99
115
18.4
99
18.4
getContext (2d context)

2d` コンテキスト
1
12
1.5
2
18
1
ImageData

ImageData インターフェイスは、canvas 要素の領域の基礎をなすピクセルデータを表します。ImageData.ImageData コンストラクターや、canvas に関連付けられた CanvasRenderingContext2D オブジェクトの CanvasRenderingContext2D.createImageData メソッドおよび CanvasRenderingContext2D.getImageData メソッドによって生成されます。ImageData は CanvasRenderingContext2D.putImageData メソッドによって canvas の一部を設定するのにも利用可能です。
1
12
3.5
3.1
18
2
colorSpace

読み取り専用プロパティ ImageData.colorSpace は、画像データの色空間を表す文字列です。
92
92
15.2
92
15.2
data

読み取り専用プロパティ ImageData.data は、ImageData オブジェクトのピクセルデータが入った Uint8ClampedArray を返します。データは RGBA の順に 0 から 255 (両端を含む) の整数値の 1 次元配列として格納されます。
1
12
3.5
3.1
18
2
height

読み取り専用プロパティ ImageData.height は、ImageData オブジェクトの行数を返します。
1
12
3.5
3.1
18
2
ImageData

ImageData() コンストラクターは、渡された型付き配列から構築され、指定された幅と高さを持つ新規生成された ImageData オブジェクトを返します。
36
14
29
8
36
8
width

読み取り専用プロパティ ImageData.width は、ImageData オブジェクトの 1 行あたりのピクセル数を返します。
1
12
3.5
3.1
18
2
worker_support

労働者で利用可能
36
14
25
7
36
7
Path2D

Path2D は Canvas 2D API のインターフェイスで、 CanvasRenderingContext2D オブジェクトで使用できるパスを宣言するために使用します。 CanvasRenderingContext2D インターフェイスのパスメソッドもこのインターフェイスにあり、必要な時にいつでもパスを保持して再生できるので便利です。
36
14
31
8
36
8
addPath

Path2D.addPath() は Canvas 2D API のメソッドで、ある Path2D オブジェクトを他の Path2D オブジェクトに追加します。
68
79
34
9
68
9
arc

CanvasRenderingContext2D.arc() はキャンバス 2D API のメソッドで、サブパスに円弧を加えます。
36
14
31
8
36
8
arcTo

CanvasRenderingContext2D.arcTo() はキャンバス 2D APIのメソッドで、制御点と半径を指定して現在のサブパスに円弧を追加します。 円弧は、例えば始点と制御点が一直線上にある場合など、必要に応じてパスの最新点に自動的に直線で接続されます。
36
14
31
8
36
8
bezierCurveTo

CanvasRenderingContext2D.bezierCurveTo() は キャンバス2D API のメソッドで、現在のサブパスに 3 次ベジェ曲線を追加します。このメソッドでは 3 つの点が要求されます。最初の 2 つは制御点であり、 3 つ目は終了点です。始点は現在のパスの最新の点で、ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更することができます。
36
14
31
8
36
8
closePath

CanvasRenderingContext2D.closePath() はキャンバス 2D API のメソッドで、現在の点から現在のサブパスの開始点までの間に直線を追加することを試みます。図形がすでに閉じていたり、 1 つしか点がなかったりした場合は、この関数は何もしません。
36
14
31
8
36
8
ellipse

CanvasRenderingContext2D.ellipse() はキャンバス 2D API のメソッドで、現在のサブパスに楕円の弧を追加します。
36
14
48
9
36
9
lineTo

CanvasRenderingContext2D の lineTo() はキャンバス 2D API のメソッドで、現在のサブパスに対して、その終点から指定された (x, y) 座標に向けて直線を追加します。
36
14
31
8
36
8
moveTo

CanvasRenderingContext2D.moveTo() はキャンバス 2D API のメソッドで、新しいサブパスの始点を (x, y) 座標に移動します。
36
14
31
8
36
8
Path2D

Path2D() コンストラクターは、新たにインスタンス化した Path2D オブジェクトを返します。他のパスを引数に渡すこともできます（複製がつくられます）。また、SVG パスからなるデータを文字列で渡すこともできます。
36
14
31
8
36
8
quadraticCurveTo

CanvasRenderingContext2D.quadraticCurveTo() はキャンバス 2D API のメソッドで、現在のサブパスに二次ベジェ曲線を追加します。2 つの点が要求され、1 つ目の点は制御点、2 つ目の点は終点です。始点は現在のパスにおける最後の点であり、二次ベジェ曲線を作成する前に CanvasRenderingContext2D.moveTo を使用して変更できます。
36
14
31
8
36
8
rect

CanvasRenderingContext2D.rect() はキャンバス 2D API のメソッドで、現在のパスに矩形を追加します。
36
14
31
8
36
8
roundRect

CanvasRenderingContext2D.roundRect() はキャンバス 2D API のメソッドで、現在のパスに角丸矩形を追加します。
99
99
112
16
99
16
TextMetrics

TextMetrics インターフェイスは、キャンバス内のテキストの一部の長さを表します。TextMetrics インスタンスは CanvasRenderingContext2D.measureText() メソッドから取得することができます。
2
12
1.5
4
18
3.2
actualBoundingBoxAscent

actualBoundingBoxAscent は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、CanvasRenderingContext2D.textBaseline 属性で示された水平線から、テキストの描画に使用される境界矩形の上端までの距離を CSS ピクセル単位で返します。
77
79
74
11.1
77
11.3
actualBoundingBoxDescent

actualBoundingBoxDescent は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、CanvasRenderingContext2D.textBaseline 属性で示された水平線から、テキストの描画に使用される境界矩形の下端までの距離を CSS ピクセル単位で返します。
77
79
74
11.1
77
11.3
actualBoundingBoxLeft

actualBoundingBoxLeft は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、指定されたテキストの境界矩形の左端から、CanvasRenderingContext2D.textAlign プロパティで与えられる配置点までの、ベースラインに平行な距離を CSS ピクセル単位で返します。正の数値は、指定された配置点から左方向への距離を示します。
77
79
74
11.1
77
11.3
actualBoundingBoxRight

actualBoundingBoxRight は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、指定されたテキストの境界矩形の右端から、CanvasRenderingContext2D.textAlign プロパティで与えられる配置点までの、ベースラインに平行な距離を CSS ピクセル単位で返します。
77
79
74
11.1
77
11.3
alphabeticBaseline

alphabeticBaseline は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、CanvasRenderingContext2D.textBaseline プロパティで示された水平線から、行ボックスのアルファベット用ベースラインまでの距離を CSS ピクセル単位で返します。
118
118
116
11.1
118
11.3
emHeightAscent

emHeightAscent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline プロパティで示された水平線から、行ボックスの em 矩形の上端までの距離を CSS ピクセル単位で返します。
77
79
118
11.1
77
11.3
emHeightDescent

emHeightDescent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline プロパティで示された水平線から、行ボックスの em 矩形の下端までの距離を CSS ピクセル単位で返します。
77
79
118
11.1
77
11.3
fontBoundingBoxAscent

fontBoundingBoxAscent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline 属性で示される水平線から、テキストの描画に使用されるすべてのフォントの中で最も高い境界矩形の上端までの距離を CSS ピクセル単位で返します。
87
87
116
11.1
87
11.3
fontBoundingBoxDescent

fontBoundingBoxDescent は TextMetrics インターフェイスの読み取り専用プロパティで、CanvasRenderingContext2D.textBaseline 属性で示される水平線から、テキストの描画に使用されるすべてのフォントの中で最も高い境界矩形の下端までの距離を CSS ピクセル単位で返します。
87
87
116
11.1
87
11.3
hangingBaseline

hangingBaseline は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、CanvasRenderingContext2D.textBaseline プロパティで示される水平線から、行ボックスのハンギングベースラインまでの距離を CSS ピクセル単位で返します。
118
118
116
11.1
118
11.3
ideographicBaseline

ideographicBaseline は TextMetrics インターフェイスの読み取り専用プロパティで、double 型であり、CanvasRenderingContext2D.textBaseline プロパティで示される水平線から、行ボックスの表意文字ベースライン（訳注：漢字のベースライン）までの距離を CSS ピクセル単位で返します。
118
118
116
11.1
118
11.3
width

width は TextMetrics インターフェイスの読み取り専用プロパティで、このテキストの送り幅（そのインラインボックスの幅）を CSS ピクセル単位で保持します。
2
12
1.5
4
18
3.2
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • Firefox 5.0 より前のバージョンでは、カラーストップを追加する際に `addColorStop()` を呼び出す際に定数でない値を指定すると、`INDEX_SIZE_ERR` ではなく `SYNTAX_ERR` が不正にスローされました。
注釈 1件
実装メモ
  • 繰り返し値 `repeat-x` と `repeat-y` は `fill()` ではサポートされず、 `fillRect()` でのみサポートされます。
注釈 1件
対応条件
  • 以前は別名で対応していました: drawSystemFocusRing (28)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • font-weight`は設定できるが、反映されない（バグ284115参照）。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (18.4)
実装メモ
  • font-weight`は設定できるが、反映されない（バグ284115参照）。
注釈 1件
削除済み
  • このバージョンで機能が削除されました (60)
注釈 1件
削除済み
  • このバージョンで機能が削除されました (60)
注釈 1件
実装メモ
  • Firefox 5 以降、`getImageData` は canvas の境界からはみ出した矩形を正しく受け付けるようになりました。canvas の外側のピクセルは透明な黒として返され、1 ピクセルより小さい矩形が指定された場合は少なくとも 1 ピクセル分の画像データも返すようになりました。
注釈 1件
対応条件
  • 以前は別名で対応していました: mozDashOffset (7)
注釈 1件
実装メモ
  • Edge 79 より前のバージョンでは、`Path2D` オブジェクトのコンストラクタは SVG パスデータからなる文字列での呼び出しに対応していない。
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

JAVASCRIPT 
<canvas id="c" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = '#005A9C';
ctx.fillRect(10, 10, 180, 80);
</script>

ライブデモ

2D drawing context

shape or text draw.Canvas API. basic. with getContext('2d')

プレビュー全画面表示

Paths and styles

Line, curveline, gradient usingdraw.

プレビュー全画面表示

Drawing methods

Canvas 2D Main method and usage.

プレビュー全画面表示

実務での使いどころ

  • 2D canvas の活用

    メモ: この機能はウェブワーカー内で利用可能です。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク