Canvas
Functions
Creates a circular arc centered at (x, y) with a radius of radius.
The path starts at startAngle, ends at endAngle, and travels in the direction given by counterclockwise.
Adds a circular arc to the current sub-path, using the given control points and radius.
The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.
This method is commonly used for making rounded corners.
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
Adds a cubic Bézier curve to the current sub-path.
It requires three points: the first two are control points and the third one is the end point.
The starting point is the latest point in the current path, which can be changed using moveTo() before creating the Bézier curve.
Clears the entire canvas.
Same as calling clearRect(0, 0, width, height)
Erases the pixels in a rectangular area by setting them to transparent black.
Turns the current 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.
Turns the 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.
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.
Creates a gradient around a point with given coordinates.
This method returns a conic CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.
Creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.
Creates a gradient along the line connecting two given coordinates.
The gradient transitions colors along the gradient line, starting at point x0, y0 and going to x1, y1, even if those points extend the gradient line beyond the edges of the element on which the gradient is drawn.
This method returns a CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.
Creates a pattern using the specified image and repetition. This method returns a CanvasPattern.
This method doesn't draw anything to the canvas directly. The pattern it creates must be assigned to the fillStyle or strokeStyle properties, after which it is applied to any subsequent drawing.
Creates a radial gradient using the size and coordinates of two circles.
This method returns a CanvasGradient. To be applied to a shape, the gradient must first be assigned to the fillStyle or strokeStyle properties.
Draws a CanvasImageSource to the canvas
Draws a CanvasImageSource to the canvas
Adds a circular arc to the current sub-path, using the given control points and radius.
The arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters.
This method is commonly used for making rounded corners.
Fills the current path with the current or given fillRule.
Fills given path with the current or given fillRule.
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.
Draws a text string at the specified coordinates, filling the string's characters with the current fillStyle.
An optional parameter allows specifying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
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 text is rendered using the font and text layout configuration as defined by the font, textAlign, textBaseline, and direction properties.
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.
Returns whether or not the specified point is contained in the given path (if passed) or current path.
Returns whether or not the specified point is inside the area contained by the stroking of a path.
Adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.
Like other methods that modify the current path, this method does not directly render anything.
To draw the path onto a canvas, you can use the fill() or stroke() methods.
Returns a TextMetrics object that contains information about the measured text (such as its width, for example).
Begins a new sub-path at the point specified by the given (x, y) coordinates.
Paints data from the given ImageData object onto the canvas. This method is not affected by the canvas transformation matrix.
Paints data from the given ImageData object onto the canvas. Only paints pixels from the defined rectangle. This method is not affected by the canvas transformation matrix.
Adds a quadratic Bézier curve to the current sub-path.
It requires two points: the first one is a control point and the second one is the end point.
The starting point is the latest point in the current path, which can be changed using moveTo() before creating the quadratic Bézier curve.
Adds a rectangle to the current path.
Like other methods that modify the current path, this method does not directly render anything. To draw the rectangle onto a canvas, you can use the fill() or stroke() methods.
Resets the rendering context to its default state, allowing it to be reused for drawing something else without having to explicitly reset all the properties.
Resetting clears the backing buffer, drawing state stack, any defined paths, and styles. This includes the current transformation matrix, compositing properties, clipping region, dash list, line styles, text styles, shadows, image smoothing, filters, and so on.
Resets the current transform to the identity matrix.
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.
Adds a rotation to the transformation matrix.
Adds a rounded rectangle to the current path.
The radii of the corners can be specified in much the same way as the CSS border-radius property.
Like other methods that modify the current path, this method does not directly render anything. To draw the rounded rectangle onto a canvas, you can use the fill() or stroke() methods.
Saves the entire state of the canvas by pushing the current state onto a stack.
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.
Specifies the current text direction used to draw text.
Specifies the color, gradient, or pattern to use inside shapes. The default style is #000 (black).
Provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.
Specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.
Specifies how font kerning information is used.
Kerning adjusts how adjacent letters are spaced in a proportional font, allowing them to edge into each other's visual area if there is space available. For example, in well-kerned fonts, the characters AV, Ta and We nest together and make character spacing more uniform and pleasant to read than the equivalent text without kerning.
The property corresponds to the font-kerning CSS property.
Specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.
Sets the type of compositing operation to apply when drawing new shapes.
See also Compositing and clipping in the Canvas Tutorial.
Determines whether scaled images are smoothed (true, default) or not (false). On getting the imageSmoothingEnabled property, the last value it was set to is returned.
This property is useful for games and other apps that use pixel art. When enlarging images, the default resizing algorithm will blur the pixels. Set this property to false to retain the pixels' sharpness.
Sets the image smoothing quality
Specifies the spacing between letters when drawing text.
This corresponds to the CSS letter-spacing property.
Determines the shape used to draw the end points of lines.
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.
Segments is 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.
Sets 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.
Sets the thickness of lines.
Sets the miter limit ratio, in coordinate space units. Zero, negative, Infinity, and NaN values are ignored. The default value is 10.0.
Specifies the amount of blur applied to shadows. The default is 0 (no blur).
Specifies the color of shadows.
Be aware that the shadow's rendered opacity will be affected by the opacity of the fillStyle color when filling, and of the strokeStyle color when stroking.
Specifies the distance that shadows will be offset horizontally.
Positive values are to the right, and negative to the left. The default value is 0 (no horizontal offset). Infinity and NaN values are ignored.
Specifies the distance that shadows will be offset vertically.
Positive values are down, and negative are up. The default value is 0 (no vertical offset). Infinity and NaN values are ignored.
Specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is #000 (black).
Specifies the current text alignment used when drawing text.
The alignment is relative to the x value of the fillText() method. 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.
Resets 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.
Resets the current transformation to the identity matrix, and then invokes a transformation with the given transform matrix.
This lets you scale, rotate, translate (move), and skew the context.
Specifies the spacing between words when drawing text.
This corresponds to the CSS word-spacing property.
Strokes (outlines) the current or given path with the current stroke style.
Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side.
The stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled.
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.
Strokes (outlines) the characters of a text string at the specified coordinates.
An optional parameter allows specifying a maxWidth for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size.
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.
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.
Adds a translation transformation to the current matrix.