PaintRenderingContext2D

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The PaintRenderingContext2D interface of the CSS Painting API is the API's rendering context for drawing to the bitmap. It implements a subset of the CanvasRenderingContext2D API, with the following exceptions:

It doesn't implement the CanvasImageData pixel manipulation, CanvasUserInterface focus, CanvasText text drawing, or CanvasTextDrawingStyles text style interface methods.
The output bitmap is the size of the object it is rendering to.
The value currentColor, when used as a color, is treated as opaque black.

The interface is only available in PaintWorkletGlobalScope.

Instance properties and methods

The PaintRenderingContext2D implements a subset of the CanvasRenderingContext2D API, with all properties and methods having the same usage as in CanvasRenderingContext2D

Context

CanvasRenderingContext2D.isContextLost(): Returns true if the rendering context was lost.

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.reset(): Resets the current drawing style state to the default values.

Transformations

CanvasRenderingContext2D.getTransform(): Retrieves the current transformation matrix being applied to the context as a DOMMatrix.
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 horizontally 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.
CanvasRenderingContext2D.globalCompositeOperation: With globalAlpha applied, this sets how shapes and images are drawn onto the existing bitmap.

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.

Fill and stroke styles

CanvasRenderingContext2D.fillStyle: Color or style to use inside shapes.
CanvasRenderingContext2D.strokeStyle: Color or style to use for the lines around shapes.

Gradients and patterns

CanvasRenderingContext2D.createConicGradient(): Creates a conic gradient around a point given by coordinates represented by the parameters.
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 CanvasPattern pattern of the specified image repeated in the directions specified by the repetition argument.

Shadows

CanvasRenderingContext2D.shadowBlur: Specifies the amount of blur as a number.
CanvasRenderingContext2D.shadowColor: Specifies the color of the shadow as a CSS <color>.
CanvasRenderingContext2D.shadowOffsetX: Specifies the horizontal distance the shadow will be offset as a number.
CanvasRenderingContext2D.shadowOffsetY: Specifies the vertical distance the shadow will be offset as a number.

Drawing rectangles

CanvasRenderingContext2D.clearRect(): Erases the pixels in the given rectangle, setting them to transparent black.
CanvasRenderingContext2D.fillRect(): Paints the pixels of the given rectangle, filling it with the current fill style.
CanvasRenderingContext2D.strokeRect(): Paints the outline of the given rectangle using the current stroke style.

Drawing paths

CanvasRenderingContext2D.beginPath(): Starts a new path, emptying the list of sub-paths. Call this method when you want to create a new path.
CanvasRenderingContext2D.fill(): Fills the sub-paths of the current path with the current fill style.
CanvasRenderingContext2D.stroke(): Strokes the sub-paths of the current path with the current stroke style.
CanvasRenderingContext2D.clip(): Turns the current or given path into the current clipping region, using the given fill rule to determine which points are in the path. Subsequent path modifications will appear inside the clipping path only.
CanvasRenderingContext2D.isPointInPath(): A boolean whose value is true if the specified point is contained in the current or specified path.
CanvasRenderingContext2D.isPointInStroke(): A boolean whose value is true if the point is inside the area contained by the stroking of a path

Drawing images

CanvasRenderingContext2D.drawImage(): Draws the given image or specified portion thereof, optionally at a specified size and position.

Line styles

CanvasRenderingContext2D.lineWidth: A number specifying the line width, in coordinate space units.
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: A number specifying the miter limit ratio, in coordinate space units.
CanvasRenderingContext2D.getLineDash(): Returns the current line dash pattern as an Array of numbers that specify the lengths of the alternative lines and gaps in coordinate space units.
CanvasRenderingContext2D.setLineDash(): Sets the list of line and dash distances as the current line dash pattern (as used when stroking).
CanvasRenderingContext2D.lineDashOffset: Specifies where to start a dash array on a line.

Paths

CanvasRenderingContext2D.closePath(): Marks the current subpath as closed, drawing a straight line from the current point to the start, and starts a new subpath with a point the same as the start and end of the newly closed subpath. 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.
CanvasRenderingContext2D.roundRect(): Creates a path for a rectangle with rounded corners at position (x, y) with a size that is determined by width and height and radii determined by radii.

Filters

CanvasRenderingContext2D.filter Non-standard: Applies a CSS or SVG filter to the canvas, e.g., to change its brightness or blurriness.

Examples

See full examples at CSS Painting API.

Specifications

Specification
CSS Painting API Level 1 # 2d-rendering-context

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PaintRenderingContext2D
beginPath
clearRect
clip
createLinearGradient
createPattern
createRadialGradient
drawImage
fill
fillRect
fillStyle
filter
Non-standard
getLineDash
getTransform
globalAlpha
globalCompositeOperation
imageSmoothingEnabled
imageSmoothingQuality
isPointInPath
isPointInStroke
lineCap
lineDashOffset
lineJoin
lineWidth
miterLimit
resetTransform
restore
rotate
save
scale
setLineDash
setTransform
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY
stroke
strokeRect
strokeStyle
transform
translate

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`PaintRenderingContext2D`
`beginPath`
`clearRect`
`clip`
`createLinearGradient`
`createPattern`
`createRadialGradient`
`drawImage`
`fill`
`fillRect`
`fillStyle`
`filter` Non-standard
`getLineDash`
`getTransform`
`globalAlpha`
`globalCompositeOperation`
`imageSmoothingEnabled`
`imageSmoothingQuality`
`isPointInPath`
`isPointInStroke`
`lineCap`
`lineDashOffset`
`lineJoin`
`lineWidth`
`miterLimit`
`resetTransform`
`restore`
`rotate`
`save`
`scale`
`setLineDash`
`setTransform`
`shadowBlur`
`shadowColor`
`shadowOffsetX`
`shadowOffsetY`
`stroke`
`strokeRect`
`strokeStyle`
`transform`
`translate`