CanvasRenderingContext2D

Properties

Property	Type	Description
`direction`	`string`	-
`fontKerning`	`string`	-
`globalAlpha`	`number`	Specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas. Value is between `0.0` (fully transparent) and `1.0` (fully opaque), inclusive. Values outside that range, including `Infinity` and `NaN`, will not be set, and `globalAlpha` will retain its previous value. Default `1.0` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalAlpha
`globalCompositeOperation`	`GlobalCompositeOperation`	Specifies the type of compositing operation to apply when drawing new shapes. Default `"source-over"` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
`imageSmoothingEnabled`	`boolean`	Determines whether scaled images are smoothed (`true`) or not (`false`). Default `true` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled
`imageSmoothingQuality`	`ImageSmoothingQuality`	Determines the quality of image smoothing. Default `"low"` Note For this property to have an effect, `imageSmoothingEnabled` must be true. See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality
`lineCap`	`CanvasLineCap`	Determines the shape used to draw the end points of lines. Default `"butt"` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineCap
`lineDashOffset`	`number`	Determines the line dash offset (or "phase"). See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
`lineJoin`	`CanvasLineJoin`	Determines the shape used to join two line segments where they meet. This property has no effect wherever two connected segments have the same direction, because no joining area will be added in this case. Degenerate segments with a length of zero (i.e. with all endpoints and control points at the exact same position) are also ignored. Default `"miter"` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineJoin
`lineWidth`	`number`	Determines the thickness of lines. Default `1.0` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/lineWidth
`miterLimit`	`number`	Specifies the miter limit ratio, in coordinate space units. Zero, negative, `Infinity`, and `NaN` values are ignored. Default `10.0` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/miterLimit
`textAlign`	`CanvasTextAlign`	Specifies the current text alignment used when drawing text. The alignment is relative to the `x` value of the `fillText()` / `strokeText()` methods. For example, if `textAlign` is `"center"`, then the text's left edge will be at `x - (textWidth / 2)`. Default `"start"` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textAlign
`textBaseline`	`CanvasTextBaseline`	Specifies the current text baseline used when drawing text. Default `"alphabetic"` See https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline

Parameter	Type
`v`	`string`

Parameter	Type
`v`	`string`

Parameter	Type
`v`	`string`

Methods

Parameter	Type
`x1`	`number`
`y1`	`number`
`x2`	`number`
`y2`	`number`
`radius`	`number`

beginPath()

beginPath(): void

Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.

Note

To create a new sub-path (i.e. one matching the current canvas state), you can use CanvasRenderingContext2D.moveTo().

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath

Parameter	Type
`cp1x`	`number`
`cp1y`	`number`
`cp2x`	`number`
`cp2y`	`number`
`x`	`number`
`y`	`number`

clearRect()

clearRect(x, y, width, height): void

Erases the pixels in a rectangular area by setting them to transparent black.

Parameters

Parameter	Type	Description
`x`	`number`	The x-axis coordinate of the rectangle's starting point.
`y`	`number`	The y-axis coordinate of the rectangle's starting point.
`width`	`number`	The rectangle's width. Positive values are to the right, and negative to the left.
`height`	`number`	The rectangle's height. Positive values are down, and negative are up.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clearRect

Parameter	Type
`fillRule`?	`CanvasFillRule`

closePath()

closePath(): void

Attempts to add a straight line from the current point to the start of the current sub-path. If the shape has already been closed or has only one point, this function does nothing.

This method doesn't draw anything to the canvas directly. You can render the path using the stroke() or fill() methods.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/closePath

Parameter	Type
`startAngle`	`number`
`x`	`number`
`y`	`number`

Parameter	Type
`sw`	`number`
`sh`	`number`
`settings`?	`ImageDataSettings`

Parameter	Type
`imagedata`	`ImageData`

Parameter	Type
`x0`	`number`
`y0`	`number`
`x1`	`number`
`y1`	`number`

Parameter	Type
`image`	`CanvasImageSource`
`repetition`	`null` \| `string`

Parameter	Type
`x0`	`number`
`y0`	`number`
`r0`	`number`
`x1`	`number`
`y1`	`number`
`r1`	`number`

drawImage()

drawImage(image, dx, dy)

drawImage(image, dx, dy): void

Draws an image onto the canvas.

Parameters

Parameter	Type	Description
`image`	`CanvasImageSource`	The image to draw onto the canvas.
`dx`	`number`	The x-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.
`dy`	`number`	The y-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage

drawImage(image, dx, dy, dWidth, dHeight)

drawImage(image, dx, dy, dWidth, dHeight): void

Draws an image onto the canvas.

Parameters

Parameter	Type	Description
`image`	`CanvasImageSource`	The image to draw onto the canvas.
`dx`	`number`	The x-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.
`dy`	`number`	The y-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.
`dWidth`	`number`	The width to draw the `image` in the destination canvas. This allows scaling of the drawn image.
`dHeight`	`number`	The height to draw the `image` in the destination canvas. This allows scaling of the drawn image.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): void

Draws an image onto the canvas.

Parameters

Parameter	Type	Description
`image`	`CanvasImageSource`	The image to draw onto the canvas.
`sx`	`number`	The x-axis coordinate of the top left corner of the sub-rectangle of the source `image` to draw into the destination context.
`sy`	`number`	The y-axis coordinate of the top left corner of the sub-rectangle of the source `image` to draw into the destination context.
`sWidth`	`number`	The width of the sub-rectangle of the source `image` to draw into the destination context.
`sHeight`	`number`	The height of the sub-rectangle of the source `image` to draw into the destination context.
`dx`	`number`	The x-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.
`dy`	`number`	The y-axis coordinate in the destination canvas at which to place the top-left corner of the source `image`.
`dWidth`	`number`	The width to draw the `image` in the destination canvas. This allows scaling of the drawn image.
`dHeight`	`number`	The height to draw the `image` in the destination canvas. This allows scaling of the drawn image.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/drawImage

Parameter	Type	Description
`fillRule`?	`CanvasFillRule`

fillRect()

fillRect(x, y, width, height): void

Draws a rectangle that is filled according to the current fillStyle.

This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.

Parameters

Parameter	Type	Description
`x`	`number`	The x-axis coordinate of the rectangle's starting point.
`y`	`number`	The y-axis coordinate of the rectangle's starting point.
`width`	`number`	The rectangle's width. Positive values are to the right, and negative to the left.
`height`	`number`	The rectangle's height. Positive values are down, and negative are up.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillRect

fillText()

fillText(text, x, y, maxWidth?): void

Draws a text string at the specified coordinates, filling the string's characters with the current fillStyle.

Parameters

Parameter	Type	Description
`text`	`string`	A string specifying the text string to render into the context.
`x`	`number`	The x-axis coordinate of the point at which to begin drawing the text, in pixels.
`y`	`number`	The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
`maxWidth`?	`number`	The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillText

getImageData()

getImageData(sx, sy, sw, sh, settings?): ImageData

Returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.

This method is not affected by the canvas's transformation matrix. If the specified rectangle extends outside the bounds of the canvas, the pixels outside the canvas are transparent black in the returned ImageData object.

Parameters

Parameter	Type	Description
`sx`	`number`	The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
`sy`	`number`	The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
`sw`	`number`	The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
`sh`	`number`	The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.
`settings`?	`ImageDataSettings`	-

Returns

ImageData

An ImageData object containing the image data for the rectangle of the canvas specified.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getImageData

getLineDash()

getLineDash(): number[]

Gets the current line dash pattern.

Returns

number[]

An Array of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number, when setting the elements, is odd, the elements of the array get copied and concatenated. For example, setting the line dash to [5, 15, 25] will result in getting back [5, 15, 25, 5, 15, 25].

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getLineDash

getTransform()

getTransform(): DOMMatrix

Retrieves the current transformation matrix being applied to the context.

Returns

DOMMatrix

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/getTransform

isPointInPath()

isPointInPath(x, y, fillRule)

isPointInPath(x, y, fillRule?): boolean

Reports whether or not the specified point is contained in the current path.

Parameters

Parameter	Type
`x`	`number`
`y`	`number`
`fillRule`?	`CanvasFillRule`

Returns

boolean

Example

ctx.beginPath();
ctx.rect(10, 10, 100, 100);
console.log(ctx.isPointInPath(30, 70));
// true

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath

isPointInPath(path, x, y, fillRule)

isPointInPath(path, x, y, fillRule?): boolean

Parameters

Parameter	Type
`path`	`Path2D`
`x`	`number`
`y`	`number`
`fillRule`?	`CanvasFillRule`

Returns

boolean

isPointInStroke()

isPointInStroke(x, y)

isPointInStroke(x, y): boolean

Reports whether or not the specified point is inside the area contained by the stroking of a path.

Parameters

Parameter	Type
`x`	`number`
`y`	`number`

Returns

boolean

Example

ctx.beginPath();
ctx.rect(10, 10, 100, 100);
console.log(ctx.isPointInStroke(50, 10));
// true

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke

isPointInStroke(path, x, y)

isPointInStroke(path, x, y): boolean

Parameters

Parameter	Type
`path`	`Path2D`
`x`	`number`
`y`	`number`

Returns

boolean

lineTo()

lineTo(x, y): void

Parameters

Parameter	Type
`x`	`number`
`y`	`number`

Returns

void

measureText()

measureText(text): TextMetrics

Returns a TextMetrics object that contains information about the measured text (such as its width, for example).

Parameters

Parameter	Type	Description
`text`	`string`	The text string to measure.

roundRect()

roundRect(x, y, width, height, radii): void

Adds a rounded rectangle to the current path.

Parameters

Parameter	Type	Default value	Description
`x`	`number`	`undefined`	The x-axis coordinate of the rectangle's starting point, in pixels.
`y`	`number`	`undefined`	The y-axis coordinate of the rectangle's starting point, in pixels.
`width`	`number`	`undefined`	The rectangle's width. Positive values are to the right, and negative to the left.
`height`	`number`	`undefined`	The rectangle's height. Positive values are down, and negative are up.
`radii`	`number` \| `DOMPointInit` \| `Iterable`<`number` \| `DOMPointInit`>	`0`	A number or list specifying the radii of the circular arc to be used for the corners of the rectangle.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/roundRect

save()

save(): void

Restores the most recently saved canvas state by popping the top entry in the drawing state stack. If there is no saved state, this method does nothing.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/restore

scale()

scale(x, y): void

Adds a scaling transformation to the canvas units horizontally and/or vertically.

By default, one unit on the canvas is exactly one pixel. A scaling transformation modifies this behavior. For instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size.

Parameters

Parameter	Type	Description
`x`	`number`	Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of `1` results in no horizontal scaling.
`y`	`number`	Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of `1` results in no vertical scaling.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/scale

setLineDash()

setLineDash(segments): void

Sets the line dash pattern used when stroking lines. It uses an array of values that specify alternating lengths of lines and gaps which describe the pattern.

Parameters

Parameter	Type	Description
`segments`	`number`[]	An `Array` of numbers that specify distances to alternately draw a line and a gap (in coordinate space units). If the number of elements in the array is odd, the elements of the array get copied and concatenated. For example, `[5, 15, 25]` will become `[5, 15, 25, 5, 15, 25]`. If the array is empty, the line dash list is cleared and line strokes return to being solid.

Returns

void

Note

To return to using solid lines, set the line dash list to an empty array.

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash

setTransform()

setTransform(a, b, c, d, e, f)

setTransform(a, b, c, d, e, f): void

Resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.

Parameters

Parameter	Type	Description
`a`	`number`	(`m11`) The cell in the first row and first column of the matrix.
`b`	`number`	(`m12`) The cell in the second row and first column of the matrix.
`c`	`number`	(`m21`) The cell in the first row and second column of the matrix.
`d`	`number`	(`m22`) The cell in the second row and second column of the matrix.
`e`	`number`	(`m41`) The cell in the first row and third column of the matrix.
`f`	`number`	(`m42`) The cell in the second row and third column of the matrix.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform

setTransform(transform)

setTransform(transform?): void

Parameters

Parameter	Type	Description
`transform`?	`DOMMatrix2DInit`	An object containing the `DOMMatrix` 2D transformation values.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setTransform

stroke()

stroke(path?): void

Strokes (outlines) the current or given path with the current stroke style.

Parameters

Parameter	Type	Description
`path`?	`Path2D`	A `Path2D` path to stroke.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/stroke

strokeRect()

strokeRect(x, y, width, height): void

Draws a rectangle that is stroked (outlined) according to the current strokeStyle and other context settings.

This method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it.

Parameters

Parameter	Type	Description
`x`	`number`	The x-axis coordinate of the rectangle's starting point.
`y`	`number`	The y-axis coordinate of the rectangle's starting point.
`width`	`number`	The rectangle's width. Positive values are to the right, and negative to the left.
`height`	`number`	The rectangle's height. Positive values are down, and negative are up.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeRect

strokeText()

strokeText(text, x, y, maxWidth?): void

Draws the outlines of the characters of the text string at the specified coordinates, stroking the string's characters with the current strokeStyle.

Parameters

Parameter	Type	Description
`text`	`string`	A string specifying the text string to render into the context.
`x`	`number`	The x-axis coordinate of the point at which to begin drawing the text, in pixels.
`y`	`number`	The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
`maxWidth`?	`number`	The maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.

Parameter	Type	Description
`a`	`number`	(`m11`) The cell in the first row and first column of the matrix.
`b`	`number`	(`m12`) The cell in the second row and first column of the matrix.
`c`	`number`	(`m21`) The cell in the first row and second column of the matrix.
`d`	`number`	(`m22`) The cell in the second row and second column of the matrix.
`e`	`number`	(`m41`) The cell in the first row and third column of the matrix.
`f`	`number`	(`m42`) The cell in the second row and third column of the matrix.

Parameter	Type	Description
`x`	`number`	Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
`y`	`number`	Distance to move in the vertical direction. Positive values are down, and negative are up.

Returns

void

See

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/translate

Parameter	Type
`x`	`number`
`y`	`number`
`radiusX`	`number`
`radiusY`	`number`
`rotation`	`number`
`startAngle`	`number`
`endAngle`	`number`
`counterclockwise`?	`boolean`