この翻訳は不完全です。英語から この記事を翻訳 してください。

The CanvasRenderingContext2D interface is used for drawing rectangles, text, images and other objects onto the canvas element.CanvasRenderingContext2D インターフェイスは、<canvas> 要素に描画するための2Dレンダリングコンテキストを提供します。
 

このインターフェイスのオブジェクトを取得するには、以下のように<canvas>のgetContext()の引数に"2d"を指定して呼び出します。

var canvas = document.getElementById('myCanvas'); // in your HTML this element appears as <canvas id="myCanvas"></canvas>
var ctx = canvas.getContext('2d');

いったん2Dレンダリングコンテキストを取得すれば、それを用いてcanvasに描画することができます。

ctx.fillStyle = 'rgb(200,0,0)'; // sets the color to fill in the rectangle with
ctx.fillRect(10, 10, 55, 50);   // draws the rectangle at position 10, 10 with a width of 55 and a height of 50

詳細は、サイドバーや以下にあるプロパティとメソッドの説明を参照してください。canvas tutorial には同様の説明と、より多くのサンプルコードがあります。

矩形の描画

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

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
二つの直線が出会う頂点のスタイルを設定します。設定可能な値は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 (デフォルト).

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

Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.

CanvasRenderingContext2D.fillStyle
Color or style to use inside shapes. Default #000 (black).
CanvasRenderingContext2D.strokeStyle
Color or style to use for the lines around shapes. Default #000 (black).

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

CanvasRenderingContext2D.createLinearGradient()
Creates a linear gradient along the line given by the coordinates represented by the parameters.
CanvasRenderingContext2D.createRadialGradient()
Creates a radial gradient along the line given by the coordinates represented by the parameters.
CanvasRenderingContext2D.createPattern()
Creates a pattern using the specified image (a CanvasImageSource). It repeats the source in the directions specified by the repetition argument. This method returns a CanvasPattern.

影のスタイル

CanvasRenderingContext2D.shadowBlur
Specifies the blurring effect. Default 0
CanvasRenderingContext2D.shadowColor
Color of the shadow. Default fully-transparent black.
CanvasRenderingContext2D.shadowOffsetX
Horizontal distance the shadow will be offset. Default 0.
CanvasRenderingContext2D.shadowOffsetY
Vertical distance the shadow will be offset. Default 0.

パスの作成

The following methods can be used to manipulate paths of objects.

CanvasRenderingContext2D.beginPath()
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
CanvasRenderingContext2D.closePath()
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
CanvasRenderingContext2D.moveTo()
Moves the starting point of a new sub-path to the (x, y) coordinates.
CanvasRenderingContext2D.lineTo()
Connects the last point in the subpath to the x, y coordinates with a straight line.
CanvasRenderingContext2D.bezierCurveTo()
Adds a cubic Bezier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bezier curve.
CanvasRenderingContext2D.quadraticCurveTo()
Adds a quadratic Bezier curve to the current path.
CanvasRenderingContext2D.arc()
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
CanvasRenderingContext2D.arcTo()
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
CanvasRenderingContext2D.ellipse()
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
CanvasRenderingContext2D.rect()
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.

パスを描画する

CanvasRenderingContext2D.fill()
Fills the subpaths with the current fill style.
CanvasRenderingContext2D.stroke()
Strokes the subpaths with the current stroke style.
CanvasRenderingContext2D.drawFocusIfNeeded()
If a given element is focused, this method draws a focus ring around the current path.
CanvasRenderingContext2D.scrollPathIntoView()
Scrolls the current path or a given path into the view.
CanvasRenderingContext2D.clip()
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
CanvasRenderingContext2D.isPointInPath()
Reports whether or not the specified point is contained in the current path.
CanvasRenderingContext2D.isPointInStroke()
Reports whether or not the specified point is inside the area contained by the stroking of a path.

図形の変形

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and Path2D objects. The methods listed below remain for historical and compatibility reasons as SVGMatrix objects are used in most parts of the API nowadays and will be used in the future instead.

CanvasRenderingContext2D.currentTransform
Current transformation matrix (SVGMatrix object).
CanvasRenderingContext2D.rotate()
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
CanvasRenderingContext2D.scale()
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
CanvasRenderingContext2D.translate()
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
CanvasRenderingContext2D.transform()
Multiplies the current transformation matrix with the matrix described by its arguments.
CanvasRenderingContext2D.setTransform()
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
CanvasRenderingContext2D.resetTransform()
Resets the current transform by the identity matrix.

透明度と合成

CanvasRenderingContext2D.globalAlpha
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
CanvasRenderingContext2D.globalCompositeOperation
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.

画像の描画

CanvasRenderingContext2D.drawImage()
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.

ピクセル操作

See also the ImageData object.

CanvasRenderingContext2D.createImageData()
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
CanvasRenderingContext2D.getImageData()
Returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
CanvasRenderingContext2D.putImageData()
Paints data from the given ImageData object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.

画像の平滑化

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.

Experimental APIs

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 の定義
現行の標準  

ブラウザ間の互換性

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり1.5992
canvas あり12 あり あり あり あり
currentTransform あり1 あり なし2 なし なし なし3
direction あり1 ? なし なし なし あり
fillStyle あり12 あり あり あり あり
filter52 ?

49

35 — 484

なし なし なし
font あり123.59 あり あり
globalAlpha あり12 あり あり あり あり
globalCompositeOperation あり12 あり あり あり あり
imageSmoothingEnabled

30

あり — 30 webkit

15

51

あり — 51 moz

あり ? ?
imageSmoothingQuality54 ? なし ?41 あり
lineCap あり12 あり あり あり あり
lineDashOffset あり12

27

75

11 あり あり
lineJoin あり12 あり あり あり あり
lineWidth あり12 あり あり あり あり
miterLimit あり12 あり あり あり あり
shadowBlur あり12 あり あり あり あり
shadowColor あり12 あり あり あり あり
shadowOffsetX あり12 あり あり あり あり
shadowOffsetY あり12 あり あり あり あり
strokeStyle あり12 あり あり あり あり
textAlign あり123.5 あり あり あり
textBaseline あり123.59 あり あり
addHitRegion あり1 ?306 なし なし なし
arc あり12 あり あり あり あり
arcTo あり12 あり あり あり あり
beginPath あり12 あり あり あり あり
bezierCurveTo あり12 あり あり あり あり
clearHitRegions あり1 ?387 なし なし なし
clearRect あり12 あり あり あり あり
clip あり12 あり あり あり あり
closePath あり12 あり あり あり あり
createImageData あり12 あり あり あり あり
createLinearGradient あり12 あり あり あり あり
createPattern あり12 あり あり あり あり
createRadialGradient あり12 あり あり あり あり
drawFocusIfNeeded あり ?

32

298

289

なし あり あり
drawImage あり12 あり あり あり あり
drawWidgetAsOnScreen なし なし41 なし なし なし
drawWindow なし なし あり なし なし なし
ellipse311348 なし189
fill あり12 あり あり あり あり
fillRect あり12 あり あり あり あり
fillText あり123.59 あり あり
getImageData あり12

あり

510

あり あり あり
getLineDash あり122711 あり あり
isPointInPath あり12 あり あり あり あり
isPointInStroke あり あり あり あり あり あり
lineTo あり12 あり あり あり あり
measureText あり12 あり9 あり あり
moveTo あり12 あり あり あり あり
putImageData あり12 あり あり あり あり
quadraticCurveTo あり12 あり あり あり あり
rect あり12 あり あり あり あり
removeHitRegion あり1 ?306 あり あり あり
resetTransform31 ?36 なし なし なし
restore あり12 あり あり あり あり
rotate あり12 あり あり あり あり
save あり12 あり あり あり あり
scale あり12 あり あり あり あり
scrollPathIntoView あり1 ? なし なし あり なし
setLineDash あり122711 あり あり
setTransform あり12 あり あり あり あり
stroke あり12 あり あり あり あり
strokeRect あり12 あり あり あり あり
strokeText あり123.59 あり あり
transform あり12 あり あり あり あり
translate あり12 あり あり あり あり
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 あり あり あり ? ? ? あり
canvas あり あり あり あり あり あり あり
currentTransform なし なし あり なし なし なし なし
direction あり あり ? なし なし あり あり
fillStyle あり あり あり あり あり あり あり
filter5252 ?

49

35 — 484

なし なし6.0
font あり あり あり4 あり あり あり
globalAlpha あり あり あり あり あり あり あり
globalCompositeOperation あり あり あり あり あり あり あり
imageSmoothingEnabled30 ? あり

51

あり — 51 moz

? ? ?
imageSmoothingQuality5454 ? なし41 あり6.0
lineCap あり あり あり あり あり あり あり
lineDashOffset あり あり あり

27

75

あり あり あり
lineJoin あり あり あり あり あり あり あり
lineWidth あり あり あり あり あり あり あり
miterLimit あり あり あり あり あり あり あり
shadowBlur あり あり あり あり あり あり あり
shadowColor あり あり あり あり あり あり あり
shadowOffsetX あり あり あり あり あり あり あり
shadowOffsetY あり あり あり あり あり あり あり
strokeStyle あり あり あり あり あり あり あり
textAlign あり あり あり4 あり あり あり
textBaseline あり あり あり4 あり あり あり
addHitRegion なし なし ?306 なし なし なし
arc あり あり あり あり あり あり あり
arcTo あり あり あり あり あり あり あり
beginPath あり あり あり あり あり あり あり
bezierCurveTo あり あり あり あり あり あり あり
clearHitRegions なし なし ?387 なし なし なし
clearRect あり あり あり あり あり あり あり
clip あり あり あり あり あり あり あり
closePath あり あり あり あり あり あり あり
createImageData あり あり あり あり あり あり あり
createLinearGradient あり あり あり あり あり あり あり
createPattern あり あり あり あり あり あり あり
createRadialGradient あり あり あり あり あり あり あり
drawFocusIfNeeded あり あり ?

32

298

289

あり あり あり
drawImage あり あり あり あり あり あり あり
drawWidgetAsOnScreen なし なし なし41 なし なし なし
drawWindow なし なし なし あり なし なし なし
ellipse なし あり あり あり なし あり あり
fill あり あり あり あり あり あり あり
fillRect あり あり あり あり あり あり あり
fillText あり あり あり4 あり あり あり
getImageData あり あり あり

あり

510

あり あり あり
getLineDash あり あり あり27 あり あり あり
isPointInPath あり あり あり あり あり あり あり
isPointInStroke あり あり あり あり あり あり あり
lineTo あり あり あり あり あり あり あり
measureText あり あり あり あり あり あり あり
moveTo あり あり あり あり あり あり あり
putImageData あり あり あり あり あり あり あり
quadraticCurveTo あり あり あり あり あり あり あり
rect あり あり あり あり あり あり あり
removeHitRegion なし なし ?306 あり あり なし
resetTransform なし なし ?36 なし なし なし
restore あり あり あり あり あり あり あり
rotate あり あり あり あり あり あり あり
save あり あり あり あり あり あり あり
scale あり あり あり あり あり あり あり
scrollPathIntoView あり あり ? なし なし なし あり
setLineDash あり あり あり なし あり あり あり
setTransform あり あり あり あり あり あり あり
stroke あり あり あり あり あり あり あり
strokeRect あり あり あり あり あり あり あり
strokeText あり あり あり あり あり あり あり
transform あり あり あり あり あり あり あり
translate あり あり あり あり あり あり あり

1. This feature is behind the ExperimentalCanvasFeatures preference. To change preferences in Chrome, visit chrome://flags.

2. See bug (928150). Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.

3. See webkitbug(174278).

4. 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.

5. Supported as mozDashOffset.

6. From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.

7. From version 38: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.

8. From version 29: this feature is behind the canvas.focusring.enabled preference. To change preferences in Firefox, visit about:config.

9. Supported as drawSystemFocusRing.

10. 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.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: woodmix, hikalium
最終更新者: woodmix,