CanvasRenderingContext2Dis an object that is used to issue 2D drawing commands to a canvas. It is obtained by passing
The css string describing the font used to draw text. Defaults to
The alpha to use for subsequent paint operations. Must be between
1. Defaults to
Determines how subsequent paint operations combine with the back buffer. Must be one of the following (
source refers to the current drawing operation and
destination refers to the existing contents of the canvas):
|Draw the source on the canvas normally.|
|Keep the source where the destination is opaque.|
|Keep the source where the destination is transparent.|
|Draw the source on the destination but only keep pixels that were opaque in the destination.|
|Draw the source under the destination.|
|Keep the destination where the source is opaque.|
|Keep the destination where the source is transparent.|
|Draw the destination on the source but only keep pixels that were opaque in the source.|
|Increase the brightness of pixels under the source.|
|Keep only the source.|
|Exclusive OR of the source and destination.|
Determines the shape of line endings. Must be one of
'square'. Defaults to
Determines how lines meet. Must be one of
'bevel'. Defaults to
Adjusts the maximum distance the miter point can extend from the joint.
Describes how big the shadow blur is. Larger numbers are blurrier. Defaults to
Determines the x offset of the shadow from the drawn shape.
Determines the y offset of the shadow from the drawn shape.
Continues the current path by creating an arc of circle centered at
y of radius
endAngle. The angles are specified in radians where
0 points to the right,
Math.PI / 2 points down,
Math.PI points to the left, etc. The
counterclockwise parameter determines which part of the circle is used for the path.
Draws 2 imaginary lines between the previous point and the control point and between the control point and the end point.
arcTo fits a circle of the specified radius between these lines. The drawn figure is a line from the previous point to the place where the circle touches the first imaginary line and an arc along the circle to the point where it touches the second imaginary line. This method will not draw all the way to the end point (unless the end point matches the spot where the circle touches the secondary imaginary line).
Draw a bezier curve from the current point to
cp2y as control points. The curve generally does not pass through the control points.
Clears a rectangular portion of the canvas to transparent.
Creates a linear gradient from
Creates a radial gradient from the circle at
y0 with radius
r0 to the circle at
y1 with radius
Draw a line from current point of the current path to
Retrieves information about the rendered size of
Move current point of the current path to
y without connecting the stroke.
Draw a quadratic curve from the current point to
cpy as a control point. The curve generally does not pass through the control point.
Add a closed rectangle to the current path.
Applies a rotation transform to the current transform so subsequent drawing operations are rotated by
angle radians. Positive
angles are clockwise.
Saves the current state of the
this onto the stack. Call
restore() to restore the saved state. The saved state consists of: transformation matrix, clip region,
Applies a scale transform to the current transform so subsequent drawing operations are scale by
Replaces the current transform with following matrix:
Applies the following transform to the current transform.