Class Canvas Rendering Context2D
class provides a 2D drawing context for a canvas element. Use the methods of this class to draw on the canvas. To obtain an instance of the
Canvas Rendering Context2D
, call the
Canvas Rendering Context2D
method on a canvas object. See
get Context('2d') Safari HTML5 Canvas Guide for usage examples.
Safari Desktop 10.0+ Safari Mobile 1.0+ Declaration interface CanvasRenderingContext2D
Topics Drawing Rectangles clear Rect
Clears the specified rectangle to transparent black—RGBa(0,0,0,0).
Fills a specified rectangle in the current fill color, gradient, or pattern.
Draws a rectangle using the current stroke color, pattern, or gradient.
Creating Paths (Lines, Curves, Arcs, and Shapes)
Paths are made up of line segments, curves, and arcs. A path is drawn when you call the
Constrains the clipping region of the canvas to the current path.
is Point In Path
Determines whether a specified point is within the area defined by the current path.
Filling and Stroking Lines and Paths fill
Fills the current path using the current fill color, gradient, or pattern.
A CSS color, a gradient, or a pattern used to fill shapes and text.
A string specifying the type of end cap to put on lines to be drawn using
line To() line Join
A string specifying the manner in which line joins are drawn.
A floating-point number that controls the width of lines and strokes, in pixels.
A floating-point number that controls the miter limit ratio for mitered line joins.
Draws the outline of the current path using the current stroke style and line width.
A CSS color, a gradient, or a pattern used to stroke lines and shapes.
Drawing Images draw Image
Draws the specified image with its upper-left corner at the specified point on the canvas, optionally scaling the image to a specified width and height. Alternatively, draws a specified region of the image, mapped to a specified region of the canvas.
Drawing Text fill Text
Draws a line of text at the specified x,y coordinates, optionally scaled to a specified maximum width.
A string containing font settings, such as the font family, size, and weight.
Determines the width of the bounding box required to render the specified text with the current font settings.
Draws a line of text in outline at the specified x,y coordinates, optionally limited to a specified maximum width.
A string that specifies whether text is left-justified, right-justified, or centered.
A string that specifies how the bounding box aligns vertically relative to the y-coordinate.
Changing the Coordinate System
The current transformation matrix is applied to the canvas coordinate system. These methods modify the current transformation matrix.
Rotates the canvas coordinate system.
Scales the canvas coordinate system horizontally and vertically.
Transforms the current transformation matrix using another matrix.
Moves the origin of the canvas coordinate system.
Saving and Restoring Settings save
Saves the current context settings on the stack.
Restores the last saved set of context settings.
Compositing global Alpha
A floating-point number controlling the degree of opacity for all drawing operations.
Creating Gradients and Patterns
Gradients or patterns can be used instead of colors as the stroke or fill style.
create Linear Gradient
Creates a linear gradient object with a specified start point and a specified end point.
Creates a pattern object using the specified image as a template. The pattern can be specified as repeating horizontally, vertically, both horizontally and vertically (the default), or not at all.
create Radial Gradient
Creates a radial gradient object using the cone defined by the specified starting and ending circles.
Manipulating Pixels create Image Data
Creates an opaque object whose
property contains a one-dimensional array of pixel values, initialized to transparent black.
data get Image Data
object containing an RGBa pixel array corresponding to a rectangular area of the canvas.
image Data put Image Data
Blits the contents of an
object to the canvas. Alternatively, blits a specified region of the
object to the canvas.
image Data Working with Shadows
If shadows are enabled, all
operations include a shadow. Shadows need not be turned on or off using a method. You can enable or disable shadows by setting the
shadow Offset X
shadow Offset Y shadow Blur
A floating-point number that controls the degree of Gaussian blur applied to shadows.
A string that contains the RGBa color value of shadows.
shadow Offset X
A floating-point number that controls the horizontal offset of shadows from the elements casting the shadows.
shadow Offset Y
A floating-point number that controls the vertical offset of shadows from the elements casting the shadows.
Constants text Baseline Constants
Constants used to set the
property that specify the vertical alignment of the bounding box relative to its y-coordinate.
text Baseline text Align Constants
Constants used with the
property that specify the horizontal alignment of the bounding box relative to its x-coordinate.