CanvasRenderingContext2D

CanvasRenderingContext2D interface, part of the 画布 API , provides the 2D rendering context for the drawing surface of a <canvas> element. It is used for drawing shapes, text, images, and other objects.

See the interface's properties and methods in the sidebar and below. The Canvas tutorial has more explanation, examples, and resources, as well.

Basic example

To get a CanvasRenderingContext2D instance, you must first have an HTML <canvas> element to work with:

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

To get the canvas' 2D rendering context, call getContext() on the <canvas> element, supplying '2d' 作为自变量:

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

With the context in hand, you can draw anything you like. This code draws a house:

// Set line width
ctx.lineWidth = 10;
// Wall
ctx.strokeRect(75, 140, 150, 110);
// Door
ctx.fillRect(130, 190, 40, 60);
// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();
					

The resulting drawing looks like this:

参考

Drawing rectangles

There are three methods that immediately draw rectangles to the canvas.

CanvasRenderingContext2D.clearRect()
Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.
CanvasRenderingContext2D.fillRect()
Draws a filled rectangle at (x, y) position whose size is determined by width and height .
CanvasRenderingContext2D.strokeRect()
Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style.

Drawing text

The following methods draw text. See also the TextMetrics object for text properties.

CanvasRenderingContext2D.fillText()
Draws (fills) a given text at the given (x, y) position.
CanvasRenderingContext2D.strokeText()
Draws (strokes) a given text at the given (x, y) position.
CanvasRenderingContext2D.measureText()
返回 TextMetrics 对象。

Line styles

The following methods and properties control how lines are drawn.

CanvasRenderingContext2D.lineWidth
Width of lines. Default 1.0 .
CanvasRenderingContext2D.lineCap
Type of endings on the end of lines. Possible values: butt (default), round , square .
CanvasRenderingContext2D.lineJoin
Defines the type of corners where two lines meet. Possible values: round , bevel , miter (default).
CanvasRenderingContext2D.miterLimit
Miter limit ratio. Default 10 .
CanvasRenderingContext2D.getLineDash()
Returns the current line dash pattern array containing an even number of non-negative numbers.
CanvasRenderingContext2D.setLineDash()
Sets the current line dash pattern.
CanvasRenderingContext2D.lineDashOffset
Specifies where to start a dash array on a line.

Text styles

The following properties control how text is laid out.

CanvasRenderingContext2D.font
Font setting. Default value 10px sans-serif .
CanvasRenderingContext2D.textAlign
Text alignment setting. Possible values: start (default), end , left , right , center .
CanvasRenderingContext2D.textBaseline
Baseline alignment setting. Possible values: top , hanging , middle , alphabetic (default), ideographic , bottom .
CanvasRenderingContext2D.direction
Directionality. Possible values: ltr , rtl , inherit (default).

Fill and stroke styles

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

Gradients and patterns

CanvasRenderingContext2D.createLinearGradient()
Creates a linear gradient along the line given by the coordinates represented by the parameters.
CanvasRenderingContext2D.createRadialGradient()
Creates a radial gradient given by the coordinates of the two circles 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 .

Shadows

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 .

Paths

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 current sub-path to the specified (x, y) coordinates with a straight line.
CanvasRenderingContext2D.bezierCurveTo()
Adds a cubic Bézier curve to the current path.
CanvasRenderingContext2D.quadraticCurveTo()
Adds a quadratic Bézier curve to the current path.
CanvasRenderingContext2D.arc()
Adds a circular arc to the current path.
CanvasRenderingContext2D.arcTo()
Adds an arc to the current path with the given control points and radius, connected to the previous point by a straight line.
CanvasRenderingContext2D.ellipse()
Adds an elliptical arc to the current path.
CanvasRenderingContext2D.rect()
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height .

Drawing paths

CanvasRenderingContext2D.fill()
Fills the current sub-paths with the current fill style.
CanvasRenderingContext2D.stroke()
Strokes the current sub-paths 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.

Transformations

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 对象)。
CanvasRenderingContext2D.getTransform
Retrieves the current transformation matrix being applied to the context.
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.

Compositing

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.

Drawing images

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

Pixel manipulation

另请参阅 ImageData 对象。

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.

Image smoothing

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 canvas state

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> 元素。

Hit regions

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
Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or bluriness.

Non-standard APIs

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()
使用 CanvasRenderingContext2D.globalAlpha 代替。
CanvasRenderingContext2D.setCompositeOperation()
使用 CanvasRenderingContext2D.globalCompositeOperation 代替。
CanvasRenderingContext2D.setLineWidth()
使用 CanvasRenderingContext2D.lineWidth 代替。
CanvasRenderingContext2D.setLineJoin()
使用 CanvasRenderingContext2D.lineJoin 代替。
CanvasRenderingContext2D.setLineCap()
使用 CanvasRenderingContext2D.lineCap 代替。
CanvasRenderingContext2D.setMiterLimit()
使用 CanvasRenderingContext2D.miterLimit 代替。
CanvasRenderingContext2D.setStrokeColor()
使用 CanvasRenderingContext2D.strokeStyle 代替。
CanvasRenderingContext2D.setFillColor()
使用 CanvasRenderingContext2D.fillStyle 代替。
CanvasRenderingContext2D.setShadow()
使用 CanvasRenderingContext2D.shadowColor and CanvasRenderingContext2D.shadowBlur 代替。
CanvasRenderingContext2D.webkitLineDash
使用 CanvasRenderingContext2D.getLineDash() and CanvasRenderingContext2D.setLineDash() 代替。
CanvasRenderingContext2D.webkitLineDashOffset
使用 CanvasRenderingContext2D.lineDashOffset 代替。
CanvasRenderingContext2D.webkitImageSmoothingEnabled
使用 CanvasRenderingContext2D.imageSmoothingEnabled 代替。
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
CanvasRenderingContext2D.imageSmoothingEnabled .
CanvasRenderingContext2D.mozTextStyle
Introduced in in Gecko 1.9, deprecated in favor of the CanvasRenderingContext2D.font 特性。
CanvasRenderingContext2D.mozDrawText()
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use CanvasRenderingContext2D.strokeText() or CanvasRenderingContext2D.fillText() 代替。
CanvasRenderingContext2D.mozMeasureText()
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use CanvasRenderingContext2D.measureText() 代替。
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
fill rule to use. This must be one of evenodd or nonzero (default).

规范

规范 状态 Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D' in that specification.
实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
CanvasRenderingContext2D Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
addHitRegion
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ≤79
Disabled
≤79
Disabled
Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 30
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 30
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
arc Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 3 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
arcTo Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
beginPath Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
bezierCurveTo Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
canvas Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
clearHitRegions
弃用 非标
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ≤79
Disabled
≤79
Disabled
Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 38
Disabled
38
Disabled
Disabled From version 38: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 38
Disabled
38
Disabled
Disabled From version 38: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
clearRect Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
clip Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
closePath Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
createImageData Chrome Yes Edge 12 Firefox 2 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
createLinearGradient Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
createPattern Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
createRadialGradient Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
currentTransform
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ≤18 Firefox 不支持 No
注意事项
No
注意事项
bug 928150 . Firefox also supports the experimental and prefixed properties mozCurrentTransform and mozCurrentTransformInverse which set or get the current (inverse) transformation matrix.
IE 不支持 No Opera 不支持 No Safari 不支持 No
注意事项
No
注意事项
webkitbug(174278) .
WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
direction
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ≤79
Disabled
≤79
Disabled
Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 不支持 No IE 不支持 No Opera 不支持 No Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 不支持 No Opera Android 不支持 No Safari iOS Yes Samsung Internet Android Yes
drawFocusIfNeeded Chrome Yes Edge 14 Firefox 32
32
29
Disabled
Disabled From version 29: this feature is behind the canvas.focusring.enabled preference. To change preferences in Firefox, visit about:config.
28
Alternate Name
Alternate Name Uses the non-standard name: drawSystemFocusRing
IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 32
32
29
Disabled
Disabled From version 29: this feature is behind the canvas.focusring.enabled preference. To change preferences in Firefox, visit about:config.
28
Alternate Name
Alternate Name Uses the non-standard name: drawSystemFocusRing
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
drawImage Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
drawWidgetAsOnScreen
非标
Chrome 不支持 No Edge 不支持 No Firefox 41 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 41 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
drawWindow
非标
Chrome 不支持 No Edge 不支持 No Firefox 1.5 IE 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 4 Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android 不支持 No
ellipse
Chrome 31 Edge 13 Firefox 48 IE 不支持 No Opera 18 Safari 9 WebView Android 4.4.3 Chrome Android 31 Firefox Android 48 Opera Android 18 Safari iOS 9 Samsung Internet Android 2.0
fill Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
fillRect Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
fillStyle Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
fillText Chrome Yes Edge 12 Firefox 3.5 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
filter
Chrome 52 Edge 79 Firefox 49
49
35 — 48
Disabled
Disabled 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 不支持 No Opera 不支持 No Safari 不支持 No WebView Android 52 Chrome Android 52 Firefox Android 49
49
35 — 48
Disabled
Disabled 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 不支持 No Safari iOS 不支持 No Samsung Internet Android 6.0
font Chrome Yes Edge 12 Firefox 3.5 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
getImageData Chrome 1 Edge 12 Firefox 2
注意事项
2
注意事项
Since Firefox 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 9 Opera 9.5 Safari 4 WebView Android 1 Chrome Android 18 Firefox Android 4
注意事项
4
注意事项
Since Firefox 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 10.1 Safari iOS 3.2 Samsung Internet Android 1.0
getLineDash Chrome Yes Edge 12 Firefox 27 IE 11 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 27 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
getTransform Chrome 68 Edge 79 Firefox 70 IE 不支持 No Opera 55 Safari 11 WebView Android 68 Chrome Android 68 Firefox Android 不支持 No Opera Android 48 Safari iOS 11 Samsung Internet Android 10.0
globalAlpha Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
globalCompositeOperation Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 9 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
imageSmoothingEnabled
Chrome 30
30
? — 30
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge 15 Firefox 51
51
? — 51
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE Yes
Prefixed
Yes
Prefixed
Prefixed Implemented with the vendor prefix: ms
Opera Yes Safari Yes WebView Android 4.4 Chrome Android Yes Firefox Android 51
51
? — 51
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
imageSmoothingQuality
Chrome 54 Edge ≤79 Firefox 不支持 No IE ? Opera 41 Safari Yes WebView Android 54 Chrome Android 54 Firefox Android 不支持 No Opera Android 41 Safari iOS Yes Samsung Internet Android 6.0
isPointInPath Chrome Yes Edge 12 Firefox 2 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
isPointInStroke Chrome Yes Edge 79 Firefox 20
20
19 — 20
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 20
20
19 — 20
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
lineCap Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
lineDashOffset Chrome Yes Edge 12 Firefox 27
27
7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
IE 11 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 27
27
7
Alternate Name
Alternate Name Uses the non-standard name: mozDashOffset
Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
lineJoin Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
lineTo Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
lineWidth Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
measureText Chrome Yes Edge 12 Firefox 2 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
miterLimit Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
moveTo Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
putImageData Chrome Yes Edge 12 Firefox 2 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
quadraticCurveTo Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 3 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
rect Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 11.6 Safari 2 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 12 Safari iOS 1 Samsung Internet Android 1.0
removeHitRegion
弃用 非标
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge 79
Disabled
79
Disabled
Disabled From version 79: this feature is behind the Experimental Web Platform Features preference.
12 — 79
Firefox 30
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
IE Yes Opera Yes Safari Yes WebView Android 不支持 No Chrome Android 不支持 No Firefox Android 30
Disabled
30
Disabled
Disabled From version 30: this feature is behind the canvas.hitregions.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Yes Safari iOS Yes Samsung Internet Android 不支持 No
resetTransform
Chrome 31 Edge 79 Firefox 36 IE 不支持 No Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 36 Opera Android 不支持 No Safari iOS Yes Samsung Internet Android Yes
restore Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
rotate Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
save Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
scale Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
scrollPathIntoView
Chrome Yes
Disabled
Yes
Disabled
Disabled This feature is behind the Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge ≤79
Disabled
≤79
Disabled
Disabled From version ≤79: this feature is behind the Experimental Web Platform Features preference.
Firefox 不支持 No IE 不支持 No Opera Yes Safari 不支持 No WebView Android Yes Chrome Android Yes Firefox Android 不支持 No Opera Android 不支持 No Safari iOS 不支持 No Samsung Internet Android Yes
setLineDash Chrome 23 Edge 12 Firefox 27 IE 11 Opera 15 Safari 6.1 WebView Android ≤37 Chrome Android 25 Firefox Android 27 Opera Android 14 Safari iOS 7 Samsung Internet Android 1.5
setTransform Chrome Yes Edge 12 Firefox 3 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
shadowBlur Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
shadowColor Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
shadowOffsetX Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
shadowOffsetY Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
stroke Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
strokeRect Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
strokeStyle Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
strokeText Chrome Yes Edge 12 Firefox 3.5 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
textAlign Chrome Yes Edge 12 Firefox 3.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
textBaseline Chrome Yes Edge 12 Firefox 3.5 IE 9 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
transform Chrome Yes Edge 12 Firefox 3 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
translate Chrome Yes Edge 12 Firefox 1.5 IE Yes Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android 4 Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。
使用非标名称。
使用非标名称。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅