Object: CanvasRenderingContext2D
The CanvasRenderingContext2D object defines the context in which drawing and animation occurs. It represents a flat, rectangular two-dimensional surface that is placed upon the canvas defined by the associated <canvas> element. The canvas attribute defined for the context associates the context with an existing <canvas> element.
CanvasRenderingContext2D methods
|
Method name |
Description |
Support level |
Availability |
|---|---|---|---|
|
Adds points to the subpath such that the arc described by the circumference of the circle described by the arguments, starting at the given start angle and ending at the given end angle, going in the given direction, is added to the path, connected to the previous point by a straight line. |
HTML 5 |
6.0 or later |
|
|
Adds a point to the current path, connected to the previous one by a straight line, then adds a second point to the current path, connected to the previous one by an arc whose properties are described by the arguments. |
HTML 5 |
6.0 or later |
|
|
Resets the current path. |
HTML 5 |
6.0 or later |
|
|
Adds the given point to the current path, connected to the previous one by a cubic Bézier curve with the given control points. |
HTML 5 |
6.0 or later |
|
|
Clears all pixels on the canvas in the given rectangle to transparent black. |
HTML 5 |
6.0 or later |
|
|
Further constrains the clipping region to the given path. |
HTML 5 |
6.0 or later |
|
|
Closes an open subpath by connecting the last point of the subpath with the first. |
HTML 5 |
6.0 or later |
|
|
Returns an ImageData object. All the pixels in the returned object are transparent black. |
HTML 5 |
6.0 or later |
|
|
Returns a CanvasGradient object that represents a linear gradient that paints along the line given by the coordinates represented by the arguments. |
HTML 5 |
6.0 or later |
|
|
Returns a CanvasPattern object that uses the given image and repeats in the direction(s) given by the repetition argument. |
HTML 5 |
6.0 or later |
|
|
Returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. |
HTML 5 |
6.0 or later |
|
|
Draws the given image onto the canvas. |
HTML 5 |
6.0 or later |
|
|
Fills the subpaths with the current fill style. |
HTML 5 |
6.0 or later |
|
|
Paints the given rectangle onto the canvas, using the current fill style. |
HTML 5 |
6.0 or later |
|
|
Fills the given text at the given position. |
HTML 5 |
6.0 or later |
|
|
Returns an ImageData object containing the image data for the given rectangle of the canvas. |
HTML 5 |
6.0 or later |
|
|
Returns true if the given point is in the current path. |
HTML 5 |
6.0 or later |
|
|
Adds the given point to the current subpath, connected to the previous one by a straight line. |
HTML 5 |
6.0 or later |
|
|
Returns a TextMetrics object with the metrics of the given text in the current font. |
HTML 5 |
6.0 or later |
|
|
Creates a new subpath with the given point. |
HTML 5 |
6.0 or later |
|
|
Paints the data from the given ImageData object onto the canvas. |
HTML 5 |
6.0 or later |
|
|
Adds the given point to the current path, connected to the previous one by a quadratic Bézier curve with the given control point. |
HTML 5 |
6.0 or later |
|
|
Adds a new closed subpath to the path, representing the given rectangle. |
HTML 5 |
6.0 or later |
|
|
Returns the most recently saved context to the top of the drawing stack. |
HTML 5 |
6.0 or later |
|
|
Changes the transformation matrix to apply a rotation transformation with the given characteristics. The angle is in radians. |
HTML 5 |
6.0 or later |
|
|
Pushes the context to the top of the drawing stack. |
HTML 5 |
6.0 or later |
|
|
Changes the transformation matrix to apply a scaling transformation with the given characteristics. |
HTML 5 |
6.0 or later |
|
|
Sets the transformation matrix to the matrix specified by the arguments. |
HTML 5 |
6.0 or later |
|
|
Strokes the subpaths with the current stroke style. |
HTML 5 |
6.0 or later |
|
|
Paints the box that outlines the given rectangle onto the canvas, using the current stroke style. |
HTML 5 |
6.0 or later |
|
|
Strokes the given text at the given position. |
HTML 5 |
6.0 or later |
|
|
Changes the transformation matrix to apply the matrix specified by the arguments. |
HTML 5 |
6.0 or later |
|
|
Changes the transformation matrix to apply a translation transformation with the given characteristics. |
HTML 5 |
6.0 or later |
Properties
|
Property name |
Type |
Description |
Status |
Support level |
Availability |
|---|---|---|---|---|---|
|
Returns the <canvas> HTML element on which the context is rendered. |
read only |
HTML 5 |
6.0 or later |
||
|
DOMObject |
Specifies the fill style used for filling closed shapes. |
writable |
HTML 5 |
6.0 or later |
|
|
DOMString |
Specifies the font used for any text content. |
writable |
HTML 5 |
6.0 or later |
|
|
globalAlphaCompositeOperation |
float |
Specifies the alpha value applied to rendering operations. |
writable |
HTML 5 |
6.0 or later |
|
globalCompositingOperationCompositeOperation |
DOMDOMString |
Specifies the composition operation. |
writable |
HTML 5 |
6.0 or later |
|
DOMDOMString |
Specifies the shape to be used at the end of an open sub-path. |
writable |
HTML 5 |
6.0 or later |
|
|
DOMDOMString |
Specifies the shape to be used at the corners of paths or shapes. |
writable |
HTML 5 |
6.0 or later |
|
|
float |
Specifies the width of the stroke, in co-ordinate space units. |
writable |
HTML 5 |
6.0 or later |
|
|
float |
Specifies the maximum ratio of stroke width to miter length (the distance from the inner edge of the corner to the outer edge). If a mitered corner would result in the ratio exceeding the miterLimit value, then the corner is converted to a bevel. |
writable |
HTML 5 |
6.0 or later |
|
|
float |
Specifies the level of blur applied to shadows |
writable |
HTML 5 |
6.0 or later |
|
|
DOMString |
Specifies the shadow color. |
writable |
HTML 5 |
6.0 or later |
|
|
float |
Specifies the horizontal offset of the shadow. |
writable |
HTML 5 |
6.0 or later |
|
|
float |
Specifies the vertical offset of the shadow. |
writable |
HTML 5 |
6.0 or later |
|
|
DOMObject |
Specifies the stroke style used for paths and shape outlines. |
writable |
HTML 5 |
6.0 or later |
|
|
DOMString |
Specifies the text alignment settings. |
writable |
HTML 5 |
6.0 or later |
|
|
DOMString |
Specifies the baseline alignment settings. |
writable |
HTML 5 |
6.0 or later |