CanvasRenderingContext2D

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

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

基本的な例

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

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

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

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 も参照してください。

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

線のスタイル

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

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

文字列のスタイル

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

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()
パラメーターの座標から線に沿った線形のグラデーションを作成します。
CanvasRenderingContext2D.createRadialGradient()
パラメーターの座標から2つの円の座標を利用して放射状のグラデーションを作成します。
CanvasRenderingContext2D.createPattern()
指定されたイメージソース (CanvasImageSource) を利用してパターンイメージを作成します。そのパターンイメージからパラメーターの方向に繰り返します。このメソッドは 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()
現在のパスに 3 次元のベジェ曲線を追加します。
CanvasRenderingContext2D.quadraticCurveTo()
現在のパスに 2 次元のベジェ曲線を追加します。
CanvasRenderingContext2D.arc()
現在のパスに円弧を追加します。
CanvasRenderingContext2D.arcTo()
パラメーターの制御点と半径から現在のパスに円弧を追加し、直線で前の点に接続します。
CanvasRenderingContext2D.ellipse()
現在のパスに楕円形の円弧を追加します。
CanvasRenderingContext2D.rect()
パラメーターの座標 (x, y) から widthheight のサイズで長方形のパスを作成します。

パスを描画する

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

図形の変形

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

CanvasRenderingContext2D.currentTransform
現在の変換行列 (SVGMatrix オブジェクト)。
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.imageSmoothingEnabled
Image smoothing mode; if disabled, images will not be smoothed if scaled.
CanvasRenderingContext2D.imageSmoothingQuality
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()
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
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.

CanvasRenderingContext2D.clearShadow()
Removes all shadow settings like CanvasRenderingContext2D.shadowColor and CanvasRenderingContext2D.shadowBlur.
CanvasRenderingContext2D.drawImageFromRect()
This is redundant with an equivalent overload of drawImage.
CanvasRenderingContext2D.setAlpha()
Use CanvasRenderingContext2D.globalAlpha instead.
CanvasRenderingContext2D.setCompositeOperation()
Use CanvasRenderingContext2D.globalCompositeOperation instead.
CanvasRenderingContext2D.setLineWidth()
Use CanvasRenderingContext2D.lineWidth instead.
CanvasRenderingContext2D.setLineJoin()
Use CanvasRenderingContext2D.lineJoin instead.
CanvasRenderingContext2D.setLineCap()
Use CanvasRenderingContext2D.lineCap instead.
CanvasRenderingContext2D.setMiterLimit()
Use CanvasRenderingContext2D.miterLimit instead.
CanvasRenderingContext2D.setStrokeColor()
Use CanvasRenderingContext2D.strokeStyle instead.
CanvasRenderingContext2D.setFillColor()
Use CanvasRenderingContext2D.fillStyle instead.
CanvasRenderingContext2D.setShadow()
Use CanvasRenderingContext2D.shadowColor and CanvasRenderingContext2D.shadowBlur instead.
CanvasRenderingContext2D.webkitLineDash
Use CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() instead.
CanvasRenderingContext2D.webkitLineDashOffset
Use CanvasRenderingContext2D.lineDashOffset instead.
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

CanvasRenderingContext2D.webkitBackingStorePixelRatio
The backing store size in relation to the canvas element. See High DPI Canvas.
CanvasRenderingContext2D.webkitGetImageDataHD
Intended for HD backing stores, but removed from canvas specifications.
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
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.
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.
CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() instead.
CanvasRenderingContext2D.mozPathText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
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()
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 の定義
現行の標準

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
CanvasRenderingContext2D
実験的非標準
Chrome 完全対応 1Edge 完全対応 ありFirefox 完全対応 1.5IE 完全対応 9Opera 完全対応 9Safari 完全対応 2WebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
addHitRegion
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
arcChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
arcToChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
beginPathChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
bezierCurveToChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
canvasChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
clearHitRegions
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox 完全対応 38
無効
完全対応 38
無効
無効 From version 38: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 38
無効
完全対応 38
無効
無効 From version 38: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
clearRectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
clipChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
closePathChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createImageDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createLinearGradientChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createPatternChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
createRadialGradientChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
currentTransform
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 ありFirefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 928150. Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なし
補足
未対応 なし
補足
補足 See webkitbug(174278).
WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
direction
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox 未対応 なしIE 未対応 なしOpera 未対応 なしSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
drawFocusIfNeededChrome 完全対応 ありEdge 完全対応 14Firefox 完全対応 32
完全対応 32
完全対応 29
無効
無効 From version 29: this feature is behind the canvas.focusring.enabled preference. To change preferences in Firefox, visit about:config.
完全対応 28
代替名
代替名 非標準の名前 drawSystemFocusRing を使用しています。
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 32
完全対応 32
完全対応 29
無効
無効 From version 29: this feature is behind the canvas.focusring.enabled preference. To change preferences in Firefox, visit about:config.
完全対応 28
代替名
代替名 非標準の名前 drawSystemFocusRing を使用しています。
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
drawImageChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
drawWidgetAsOnScreen
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 41IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 41Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
drawWindow
非標準
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 1.5IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
ellipse
実験的
Chrome 完全対応 31Edge 完全対応 13Firefox 完全対応 48IE 未対応 なしOpera 完全対応 18Safari 完全対応 9WebView Android 未対応 なしChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
fillChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
fillRectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
fillStyleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
fillTextChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
filter
実験的
Chrome 完全対応 52Edge ? Firefox 完全対応 49
完全対応 49
未対応 35 — 48
無効
無効 From version 35 until version 48 (exclusive): this feature is behind the canvas.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 未対応 なしWebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 完全対応 49
完全対応 49
未対応 35 — 48
無効
無効 From version 35 until version 48 (exclusive): this feature is behind the canvas.filters.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 6.0
fontChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getImageDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 あり
完全対応 あり
完全対応 5
補足
補足 getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 あり
完全対応 あり
完全対応 5
補足
補足 getImageData now correctly accepts rectangles that extend beyond the bounds of the canvas; pixels outside the canvas are returned as transparent black and now also returns at least one pixel's worth of image data if a rectangle smaller than one pixel is specified.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
getLineDashChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 27IE 完全対応 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 27Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
globalAlphaChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
globalCompositeOperationChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
imageSmoothingEnabled
実験的
Chrome 完全対応 30
完全対応 30
未対応 ? — 30
接頭辞付き
接頭辞付き webkit のベンダー接頭辞が必要
Edge 完全対応 15Firefox 完全対応 51
完全対応 51
未対応 ? — 51
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き ms のベンダー接頭辞が必要
Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 4.4Chrome Android 完全対応 ありFirefox Android 完全対応 51
完全対応 51
未対応 ? — 51
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
imageSmoothingQuality
実験的
Chrome 完全対応 54Edge ? Firefox 未対応 なしIE ? Opera 完全対応 41Safari 完全対応 ありWebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 未対応 なしOpera Android 完全対応 41Safari iOS 完全対応 ありSamsung Internet Android 完全対応 6.0
isPointInPathChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
isPointInStrokeChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 20
完全対応 20
未対応 19 — 20
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 20
完全対応 20
未対応 19 — 20
接頭辞付き
接頭辞付き moz のベンダー接頭辞が必要
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineCapChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineDashOffsetChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 27
完全対応 27
完全対応 7
代替名
代替名 非標準の名前 mozDashOffset を使用しています。
IE 完全対応 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 27
完全対応 27
完全対応 7
代替名
代替名 非標準の名前 mozDashOffset を使用しています。
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineJoinChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineToChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
lineWidthChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
measureTextChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
miterLimitChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
moveToChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
putImageDataChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 2IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
quadraticCurveToChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
rectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
removeHitRegion
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし
resetTransform
実験的
Chrome 完全対応 31Edge 未対応 なしFirefox 完全対応 36IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 36Opera Android 未対応 なしSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
restoreChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
rotateChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
saveChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
scaleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
scrollPathIntoView
実験的
Chrome 完全対応 あり
無効
完全対応 あり
無効
無効 This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ? Firefox 未対応 なしIE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 未対応 なしOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり
setLineDashChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 27IE 完全対応 11Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 27Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
setTransformChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shadowBlurChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shadowColorChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shadowOffsetXChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
shadowOffsetYChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
strokeChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
strokeRectChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
strokeStyleChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
strokeTextChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
textAlignChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
textBaselineChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3.5IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
transformChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 3IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
translateChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1.5IE 完全対応 ありOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連項目