2D canvas | Frontend Practical Guide

Widely availableSupported across all major browsers. Safe to use in production.

Overview

The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.

Browser support

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`CanvasGradient`	1	12	1.5	2	18	1
`addColorStop` The CanvasGradient.addColorStop() method adds a new color stop, defined by an offset and a color, to a given canvas gradient.	1	12	1.5	2	18	1
`CanvasPattern` The CanvasPattern interface represents an opaque object describing a pattern, based on an image, a canvas, or a video, created by the CanvasRenderingContext2D.createPattern() method.	1	12	1.5	2	18	1
`setTransform` The CanvasPattern.setTransform() method uses a DOMMatrix object as the pattern's transformation matrix and invokes it on the pattern.	68	79	33	11.1	68	11.3
`setTransform (dommatrix)` Accepts a `DOMMatrix2DInit`-like object parameter	68	79	79	11.1	68	11.3
`CanvasRenderingContext2D` The CanvasRenderingContext2D interface, part of the Canvas API, provides the 2D rendering context for the drawing surface of a canvas element. It is used for drawing shapes, text, images, and other objects.	1	12	1.5	2	18	1
`arc` The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.	1	12	1.5	3	18	1
`arcTo` The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API 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 example if the starting point and control points are in a line.	1	12	1.5	2	18	1
`beginPath` The CanvasRenderingContext2D.beginPath() method of the Canvas 2D API starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.	1	12	1.5	2	18	1
`bezierCurveTo` The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API 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 CanvasRenderingContext2D.moveTo before creating the…	1	12	1.5	2	18	1
`canvas` The CanvasRenderingContext2D.canvas property, part of the Canvas API, is a read-only reference to the HTMLCanvasElement object that is associated with a given context.	1	12	1.5	3	18	1
`clearRect` The CanvasRenderingContext2D.clearRect() method of the Canvas 2D API erases the pixels in a rectangular area by setting them to transparent black.	1	12	1.5	2	18	1
`clip` The CanvasRenderingContext2D.clip() method of the Canvas 2D API 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.	1	12	1.5	2	18	1
`clip (path parameter)` `path` parameter	36	14	31	7	36	7
`closePath` The CanvasRenderingContext2D.closePath() method of the Canvas 2D API 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.	1	12	1.5	2	18	1
`createImageData` The CanvasRenderingContext2D.createImageData() method of the Canvas 2D API creates a new, blank ImageData object with the specified dimensions. All of the pixels in the new object are transparent black.	2	12	3.5	4	18	3.2
`createLinearGradient` The CanvasRenderingContext2D.createLinearGradient() method of the Canvas 2D API creates a gradient along the line connecting two given coordinates.	1	12	1.5	2	18	1
`createPattern` The CanvasRenderingContext2D.createPattern() method of the Canvas 2D API creates a pattern using the specified image and repetition. This method returns a CanvasPattern.	1	12	1.5	2	18	1
`createRadialGradient` The CanvasRenderingContext2D.createRadialGradient() method of the Canvas 2D API creates a radial gradient using the size and coordinates of two circles.	1	12	1.5	2	18	1
`direction` The CanvasRenderingContext2D.direction property of the Canvas 2D API specifies the current text direction used to draw text.	77	79	101	9	77	9
`drawFocusIfNeeded` The CanvasRenderingContext2D.drawFocusIfNeeded() method of the Canvas 2D API draws a focus ring around the current or given path, if the specified element is focused.	37	14	32	8	37	8
`drawFocusIfNeeded (path parameter)` `path` parameter	37	14		8	37	8
`drawImage` The CanvasRenderingContext2D.drawImage() method of the Canvas 2D API provides different ways to draw an image onto the canvas.	1	12	1.5	2	18	1
`drawImage (ImageBitmap source image)` ImageBitmap as source image	50	79	42	15	50	15
`ellipse` The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.	31	13	48	9	31	9
`fill` The CanvasRenderingContext2D.fill() method of the Canvas 2D API fills the current or given path with the current CanvasRenderingContext2D.fillStyle.	1	12	1.5	2	18	1
`fill (path parameter)` `path` parameter	36	14	31	7	36	7
`fillRect` The CanvasRenderingContext2D.fillRect() method of the Canvas 2D API draws a rectangle that is filled according to the current CanvasRenderingContext2D.fillStyle.	1	12	1.5	2	18	1
`fillStyle` The CanvasRenderingContext2D.fillStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use inside shapes. The default style is black.	1	12	1.5	2	18	1
`fillText` The CanvasRenderingContext2D method fillText(), part of the Canvas 2D API, draws a text string at the specified coordinates, filling the string's characters with the current CanvasRenderingContext2D.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…	2	12	3.5	4	18	3.2
`filter` The CanvasRenderingContext2D.filter property of the Canvas 2D API provides filter effects such as blurring and grayscaling. It is similar to the CSS filter property and accepts the same values.	52	79	49	18	52	18
`font` The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.	2	12	3.5	18.4	18	18.4
`fontKerning` The CanvasRenderingContext2D.fontKerning property of the Canvas API specifies how font kerning information is used.	99	99	104		99
`fontStretch` The CanvasRenderingContext2D.fontStretch property of the Canvas API specifies how the font may be expanded or condensed when drawing text.	99	99	117		99
`fontVariantCaps` The CanvasRenderingContext2D.fontVariantCaps property of the Canvas API specifies an alternative capitalization of the rendered text.	99	99	117		99
`getContextAttributes` The CanvasRenderingContext2D.getContextAttributes() method returns an object that contains attributes used by the context.	73	79	117	15	73	15
`getImageData` The CanvasRenderingContext2D method getImageData() of the Canvas 2D API returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.	2	12	2	4	18	3.2
`getLineDash` The getLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface gets the current line dash pattern.	23	12	27	7	25	7
`getTransform` The CanvasRenderingContext2D.getTransform() method of the Canvas 2D API retrieves the current transformation matrix being applied to the context.	68	79	70	11.1	68	11.3
`globalAlpha` The CanvasRenderingContext2D.globalAlpha property of the Canvas 2D API specifies the alpha (transparency) value that is applied to shapes and images before they are drawn onto the canvas.	1	12	1.5	2	18	1
`globalCompositeOperation` The CanvasRenderingContext2D.globalCompositeOperation property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes.	1	12	1.5	2	18	1
`imageSmoothingEnabled` The imageSmoothingEnabled property of the CanvasRenderingContext2D interface, part of the Canvas API, 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.	30	15	51	9.1	30	9.3
`imageSmoothingQuality` The imageSmoothingQuality property of the CanvasRenderingContext2D interface, part of the Canvas API, lets you set the quality of image smoothing.	54	79		9.1	54	9.3
`isPointInPath` The CanvasRenderingContext2D.isPointInPath() method of the Canvas 2D API reports whether or not the specified point is contained in the current path.	1	12	2	3.1	18	2
`isPointInPath (path parameter)` `path` parameter	36	14	31	7	36	7
`isPointInStroke` The CanvasRenderingContext2D.isPointInStroke() method of the Canvas 2D API reports whether or not the specified point is inside the area contained by the stroking of a path.	26	79	19	7	26	7
`isPointInStroke (path parameter)` `path` parameter	36	79	31	7	36	7
`lang` Experimental The CanvasRenderingContext2D.lang property of the Canvas 2D API gets or sets the language of the canvas drawing context.	136	136			136
`letterSpacing` The CanvasRenderingContext2D.letterSpacing property of the Canvas API specifies the spacing between letters when drawing text.	99	99	115	18.4	99	18.4
`lineCap` The CanvasRenderingContext2D.lineCap property of the Canvas 2D API determines the shape used to draw the end points of lines.	1	12	1.5	2	18	1
`lineDashOffset` The CanvasRenderingContext2D.lineDashOffset property of the Canvas 2D API sets the line dash offset, or "phase."	23	12	27	7	25	7
`lineJoin` The CanvasRenderingContext2D.lineJoin property of the Canvas 2D API determines the shape used to join two line segments where they meet.	1	12	1.5	2	18	1
`lineTo` The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.	1	12	1.5	2	18	1
`lineWidth` The CanvasRenderingContext2D.lineWidth property of the Canvas 2D API sets the thickness of lines.	1	12	1.5	2	18	1
`measureText` The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the measured text (such as its width, for example).	2	12	3.5	4	18	3.2
`miterLimit` The CanvasRenderingContext2D.miterLimit property of the Canvas 2D API sets the miter limit ratio.	1	12	1.5	2	18	1
`moveTo` The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y) coordinates.	1	12	1.5	2	18	1
`putImageData` The CanvasRenderingContext2D.putImageData() method of the Canvas 2D API paints data from the given ImageData object onto the canvas. If a dirty rectangle is provided, only the pixels from that rectangle are painted. This method is not affected by the canvas transformation matrix.	2	12	2	4	18	3.2
`quadraticCurveTo` The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API 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 CanvasRenderingContext2D.moveTo before creating…	1	12	1.5	3	18	1
`rect` The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.	1	12	1.5	2	18	1
`resetTransform` The CanvasRenderingContext2D.resetTransform() method of the Canvas 2D API resets the current transform to the identity matrix.	31	79	36	10.1	31	10.3
`restore` The CanvasRenderingContext2D.restore() method of the Canvas 2D API 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.	1	12	1.5	2	18	1
`rotate` The CanvasRenderingContext2D.rotate() method of the Canvas 2D API adds a rotation to the transformation matrix.	1	12	1.5	2	18	1
`save` The CanvasRenderingContext2D.save() method of the Canvas 2D API saves the entire state of the canvas by pushing the current state onto a stack.	1	12	1.5	2	18	1
`scale` The CanvasRenderingContext2D.scale() method of the Canvas 2D API adds a scaling transformation to the canvas units horizontally and/or vertically.	1	12	1.5	2	18	1
`setLineDash` The setLineDash() method of the Canvas 2D API's CanvasRenderingContext2D interface 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.	23	12	27	7	25	7
`setTransform` The CanvasRenderingContext2D.setTransform() method of the Canvas 2D API 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.	2	12	3	4	18	3.2
`setTransform (matrix parameter)` Accept matrix object as parameter	68	79	70	11.1	68	11.3
`shadowBlur` The CanvasRenderingContext2D.shadowBlur property of the Canvas 2D API specifies the amount of blur applied to shadows. The default is 0 (no blur).	1	12	1.5	2	18	1
`shadowColor` The CanvasRenderingContext2D.shadowColor property of the Canvas 2D API specifies the color of shadows.	1	12	1.5	2	18	1
`shadowOffsetX` The CanvasRenderingContext2D.shadowOffsetX property of the Canvas 2D API specifies the distance that shadows will be offset horizontally.	1	12	1.5	2	18	1
`shadowOffsetY` The CanvasRenderingContext2D.shadowOffsetY property of the Canvas 2D API specifies the distance that shadows will be offset vertically.	1	12	1.5	2	18	1
`stroke` The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.	1	12	1.5	2	18	1
`stroke (path parameter)` `path` parameter	36	14	31	7	36	7
`strokeRect` The CanvasRenderingContext2D.strokeRect() method of the Canvas 2D API draws a rectangle that is stroked (outlined) according to the current CanvasRenderingContext2D.strokeStyle and other context settings.	1	12	1.5	2	18	1
`strokeStyle` The CanvasRenderingContext2D.strokeStyle property of the Canvas 2D API specifies the color, gradient, or pattern to use for the strokes (outlines) around shapes. The default is black.	1	12	1.5	2	18	1
`strokeText` The CanvasRenderingContext2D method strokeText(), part of the Canvas 2D API, strokes — that is, draws the outlines of — the characters of a text string at the specified coordinates. 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.	2	12	3.5	4	18	3.2
`textAlign` The CanvasRenderingContext2D.textAlign property of the Canvas 2D API specifies the current text alignment used when drawing text.	2	12	3.5	4	18	3.2
`textBaseline` The CanvasRenderingContext2D.textBaseline property of the Canvas 2D API specifies the current text baseline used when drawing text.	2	12	3.5	4	18	3.2
`textRendering` The CanvasRenderingContext2D.textRendering property of the Canvas API provides information to the rendering engine about what to optimize for when rendering text.	99	99	116		99
`transform` The CanvasRenderingContext2D.transform() method of the Canvas 2D API 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.	1	12	3	3.1	18	2
`translate` The CanvasRenderingContext2D.translate() method of the Canvas 2D API adds a translation transformation to the current matrix.	1	12	1.5	2	18	1
`wordSpacing` The CanvasRenderingContext2D.wordSpacing property of the Canvas API specifies the spacing between words when drawing text.	99	99	115	18.4	99	18.4
`getContext (2d context)` `2d` context	1	12	1.5	2	18	1
`ImageData` The ImageData interface represents the underlying pixel data of an area of a canvas element.	1	12	3.5	3.1	18	2
`colorSpace` The read-only ImageData.colorSpace property is a string indicating the color space of the image data.	92	92		15.2	92	15.2
`data` The readonly ImageData.data property returns a Uint8ClampedArray or Float16Array that contains the ImageData object's pixel data. Data is stored as a one-dimensional array in the RGBA order.	1	12	3.5	3.1	18	2
`height` The readonly ImageData.height property returns the number of rows in the ImageData object.	1	12	3.5	3.1	18	2
`ImageData` The ImageData() constructor returns a newly instantiated ImageData object built from the typed array given and having the specified width and height.	36	14	29	8	36	8
`width` The readonly ImageData.width property returns the number of pixels per row in the ImageData object.	1	12	3.5	3.1	18	2
`worker_support` Available in workers	36	14	25	7	36	7
`Path2D` The Path2D interface of the Canvas 2D API is used to declare a path that can then be used on a CanvasRenderingContext2D object. The path methods of the CanvasRenderingContext2D interface are also present on this interface, which gives you the convenience of being able to retain and replay your path whenever desired.	36	14	31	8	36	8
`addPath` The Path2D.addPath() method of the Canvas 2D API adds one Path2D object to another Path2D object.	68	79	34	9	68	9
`arc` The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.	36	14	31	8	36	8
`arcTo` The CanvasRenderingContext2D.arcTo() method of the Canvas 2D API 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 example if the starting point and control points are in a line.	36	14	31	8	36	8
`bezierCurveTo` The CanvasRenderingContext2D.bezierCurveTo() method of the Canvas 2D API 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 CanvasRenderingContext2D.moveTo before creating the…	36	14	31	8	36	8
`closePath` The CanvasRenderingContext2D.closePath() method of the Canvas 2D API 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.	36	14	31	8	36	8
`ellipse` The CanvasRenderingContext2D.ellipse() method of the Canvas 2D API adds an elliptical arc to the current sub-path.	36	14	48	9	36	9
`lineTo` The CanvasRenderingContext2D method lineTo(), part of the Canvas 2D API, adds a straight line to the current sub-path by connecting the sub-path's last point to the specified (x, y) coordinates.	36	14	31	8	36	8
`moveTo` The CanvasRenderingContext2D.moveTo() method of the Canvas 2D API begins a new sub-path at the point specified by the given (x, y) coordinates.	36	14	31	8	36	8
`Path2D` The Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path data.	36	14	31	8	36	8
`quadraticCurveTo` The CanvasRenderingContext2D.quadraticCurveTo() method of the Canvas 2D API 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 CanvasRenderingContext2D.moveTo before creating…	36	14	31	8	36	8
`rect` The CanvasRenderingContext2D.rect() method of the Canvas 2D API adds a rectangle to the current path.	36	14	31	8	36	8
`roundRect` The CanvasRenderingContext2D.roundRect() method of the Canvas 2D API adds a rounded rectangle to the current path.	99	99	112	16	99	16
`TextMetrics` The TextMetrics interface represents the dimensions of a piece of text in the canvas; a TextMetrics instance can be retrieved using the CanvasRenderingContext2D.measureText() method.	2	12	1.5	4	18	3.2
`actualBoundingBoxAscent` The read-only actualBoundingBoxAscent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the top of the bounding rectangle used to render the text, in CSS pixels.	77	79	74	11.1	77	11.3
`actualBoundingBoxDescent` The read-only actualBoundingBoxDescent property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.	77	79	74	11.1	77	11.3
`actualBoundingBoxLeft` The read-only actualBoundingBoxLeft property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given…	77	79	74	11.1	77	11.3
`actualBoundingBoxRight` The read-only actualBoundingBoxRight property of the TextMetrics interface is a double giving the distance parallel to the baseline from the alignment point given by the CanvasRenderingContext2D.textAlign property to the right side of the bounding rectangle of the given text, in CSS pixels.	77	79	74	11.1	77	11.3
`alphabeticBaseline` The read-only alphabeticBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the alphabetic baseline of the line box, in CSS pixels.	118	118	116	11.1	118	11.3
`emHeightAscent` The read-only emHeightAscent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the top of the em square in the line box, in CSS pixels.	77	79	118	11.1	77	11.3
`emHeightDescent` The read-only emHeightDescent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the bottom of the em square in the line box, in CSS pixels.	77	79	118	11.1	77	11.3
`fontBoundingBoxAscent` The read-only fontBoundingBoxAscent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.	87	87	116	11.1	87	11.3
`fontBoundingBoxDescent` The read-only fontBoundingBoxDescent property of the TextMetrics interface returns the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.	87	87	116	11.1	87	11.3
`hangingBaseline` The read-only hangingBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the hanging baseline of the line box, in CSS pixels.	118	118	116	11.1	118	11.3
`ideographicBaseline` The read-only ideographicBaseline property of the TextMetrics interface is a double giving the distance from the horizontal line indicated by the CanvasRenderingContext2D.textBaseline property to the ideographic baseline of the line box, in CSS pixels.	118	118	116	11.1	118	11.3
`width` The read-only width property of the TextMetrics interface contains the text's advance width (the width of that inline box) in CSS pixels.	2	12	1.5	4	18	3.2

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT

<canvas id="c" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById('c').getContext('2d');
ctx.fillStyle = '#005A9C';
ctx.fillRect(10, 10, 180, 80);
</script>

Live demo

2D drawing context

shape or text draw.Canvas API. basic. with getContext('2d')

PreviewFullscreen

Paths and styles

Line, curveline, gradient usingdraw.

PreviewFullscreen

Drawing methods

Canvas 2D Main method and usage.

PreviewFullscreen

Use cases

Using 2D canvas
The CanvasRenderingContext2D API is the "2d" rendering context for the <canvas> element. It represents a flat, two-dimensional space for drawing graphics and animations.

Cautions

May not be supported in older browsers.

Overview

Browser support

Syntax

Live demo

2D drawing context

Paths and styles

Drawing methods

Use cases

Using 2D canvas

Cautions

Accessibility

Related links