Specifies the type of compositing operation to apply when drawing new shapes.
"source-over"
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
Determines whether scaled images are smoothed (true) or not (false).
Determines the quality of image smoothing.
"low"
For this property to have an effect, imageSmoothingEnabled must be true.
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality
Determines the shape used to draw the end points of lines.
Determines the line dash offset (or "phase").
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.
Determines the thickness of lines.
Specifies the miter limit ratio, in coordinate space units. Zero, negative,
Infinity, and NaN values are ignored.
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).
Specifies the current text baseline used when drawing text.
"alphabetic"
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/textBaseline
Specifies the color, gradient, or pattern to use inside shapes.
"#000" (black)
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/fillStyle
Specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
"10px sans-serif"
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/font
Specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes.
"#000" (black)
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/strokeStyle
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
To create a new sub-path (i.e. one matching the current canvas state),
you can use CanvasRenderingContext2D.moveTo().
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/beginPath
Erases the pixels in a rectangular area by setting them to transparent black.
The x-axis coordinate of the rectangle's starting point.
The y-axis coordinate of the rectangle's starting point.
The rectangle's width. Positive values are to the right, and negative to the left.
The rectangle's height. Positive values are down, and negative are up.
Turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.
Optional fillRule: CanvasFillRule// Create circular clipping region
ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI * 2);
ctx.clip();
// Draw stuff that gets clipped
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "orange";
ctx.fillRect(0, 0, 100, 100);
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/clip
Optional fillRule: CanvasFillRuleAttempts 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.
Draws an image onto the canvas.
The image to draw onto the canvas.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
Draws an image onto the canvas.
The image to draw onto the canvas.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The width to draw the image in the destination canvas. This allows scaling of the drawn image.
The height to draw the image in the destination canvas. This allows scaling of the drawn image.
Draws an image onto the canvas.
The image to draw onto the canvas.
The x-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
The y-axis coordinate of the top left corner of the sub-rectangle of the source image to draw into the destination context.
The width of the sub-rectangle of the source image to draw into the destination context.
The height of the sub-rectangle of the source image to draw into the destination context.
The x-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The y-axis coordinate in the destination canvas at which to place the top-left corner of the source image.
The width to draw the image in the destination canvas. This allows scaling of the drawn image.
The height to draw the image in the destination canvas. This allows scaling of the drawn image.
Fills the current or given path with the current fillStyle.
Optional fillRule: CanvasFillRuleOptional fillRule: CanvasFillRuleDraws 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.
The x-axis coordinate of the rectangle's starting point.
The y-axis coordinate of the rectangle's starting point.
The rectangle's width. Positive values are to the right, and negative to the left.
The rectangle's height. Positive values are down, and negative are up.
Draws a text string at the specified coordinates, filling the string's
characters with the current fillStyle.
A string specifying the text string to render into the context.
The x-axis coordinate of the point at which to begin drawing the text, in pixels.
The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
Optional maxWidth: numberThe maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.
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.
The x-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
The y-axis coordinate of the top-left corner of the rectangle from which the ImageData will be extracted.
The width of the rectangle from which the ImageData will be extracted. Positive values are to the right, and negative to the left.
The height of the rectangle from which the ImageData will be extracted. Positive values are down, and negative are up.
Optional settings: ImageDataSettingsAn ImageData object containing the image data for the rectangle of the canvas specified.
Gets the current line dash pattern.
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].
Reports whether or not the specified point is contained in the current path.
Optional fillRule: CanvasFillRulectx.beginPath();
ctx.rect(10, 10, 100, 100);
console.log(ctx.isPointInPath(30, 70));
// true
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInPath
Optional fillRule: CanvasFillRuleReports whether or not the specified point is inside the area contained by the stroking of a path.
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
console.log(ctx.isPointInStroke(50, 10));
// true
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/isPointInStroke
Returns a TextMetrics object that contains information about
the measured text (such as its width, for example).
The text string to measure.
Adds a rounded rectangle to the current path.
The x-axis coordinate of the rectangle's starting point, in pixels.
The y-axis coordinate of the rectangle's starting point, in pixels.
The rectangle's width. Positive values are to the right, and negative to the left.
The rectangle's height. Positive values are down, and negative are up.
A number or list specifying the radii of the circular arc to be used for the corners of the rectangle.
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.
Scaling factor in the horizontal direction. A negative value flips pixels across the vertical axis. A value of 1 results in no horizontal scaling.
Scaling factor in the vertical direction. A negative value flips pixels across the horizontal axis. A value of 1 results in no vertical scaling.
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.
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.
To return to using solid lines, set the line dash list to an empty array.
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/setLineDash
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.
(m11) The cell in the first row and first column of the matrix.
(m12) The cell in the second row and first column of the matrix.
(m21) The cell in the first row and second column of the matrix.
(m22) The cell in the second row and second column of the matrix.
(m41) The cell in the first row and third column of the matrix.
(m42) The cell in the second row and third column of the matrix.
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.
Optional transform: DOMMatrix2DInitAn object containing the DOMMatrix 2D transformation values.
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.
The x-axis coordinate of the rectangle's starting point.
The y-axis coordinate of the rectangle's starting point.
The rectangle's width. Positive values are to the right, and negative to the left.
The rectangle's height. Positive values are down, and negative are up.
Draws the outlines of the characters of the text string at the specified coordinates,
stroking the string's characters with the current strokeStyle.
A string specifying the text string to render into the context.
The x-axis coordinate of the point at which to begin drawing the text, in pixels.
The y-axis coordinate of the baseline on which to begin drawing the text, in pixels.
Optional maxWidth: numberThe maximum number of pixels wide the text may be once rendered. If not specified, there is no limit to the width of the text.
Multiplies the current transformation with the matrix described by the arguments of this method. This lets you scale, rotate, translate (move), and skew the context.
(m11) The cell in the first row and first column of the matrix.
(m12) The cell in the second row and first column of the matrix.
(m21) The cell in the first row and second column of the matrix.
(m22) The cell in the second row and second column of the matrix.
(m41) The cell in the first row and third column of the matrix.
(m42) The cell in the second row and third column of the matrix.
Adds a translation transformation to the current matrix by moving the canvas
and its origin x units horizontally and y units vertically on the grid.
Distance to move in the horizontal direction. Positive values are to the right, and negative to the left.
Distance to move in the vertical direction. Positive values are down, and negative are up.
Generated using TypeDoc
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) and1.0(fully opaque), inclusive. Values outside that range, includingInfinityandNaN, will not be set, andglobalAlphawill retain its previous value.