The HTML5 <canvas>JavaScript ). On its own, the <canvas> element is just an empty container — you draw into it from a script.
To get something to draw with, you call the element's getContext('2d') method. It returns a CanvasRenderingContext2D
const canvas = document. getElementById ( 'myCanvas' ); const ctx = canvas. getContext ( '2d' ); // a CanvasRenderingContext2D ctx.fillStyle = 'green' ; ctx. fillRect ( 10 , 10 , 100 , 80 ); Copy
Almost every property and method on this page belongs to that 2D context object (ctx above), not to the <canvas> element. The two exceptions are getContext() and toDataURL(), which belong to the <canvas> element itself, and the width/height/data properties under Pixel Manipulation , which belong to ImageData objects. These are grouped in their own sections below.
For step-by-step tutorials, see Canvas introduction , drawing shapes , coordinates , text , and gradients .
Colors, Styles, and Shadows
Property Description fillStyle Sets or returns the color, gradient, or pattern used to fill the shapes. strokeStyle Sets or returns the color, gradient, or pattern used for the lines around the shapes. shadowColor Sets or returns the color of the shadows. shadowBlur Sets or returns the blur level of the shadows. shadowOffsetX Sets or returns the x offset of the shadow. shadowOffsetY Sets or returns the y offset of the shadow.
Method Description createLinearGradient() Creates a linear gradient for using on the canvas content. createPattern() Repeats a particular element in the specified direction. createRadialGradient() Creates a circular/radial gradient for using on the canvas content. addColorStop() Defines colors and stop positions in the gradient object.
See the Canvas gradients tutorial for worked examples.
Line Styles
Property Description lineCap Sets or returns the style of the line’s end caps. lineJoin Sets or returns the type of drawn corners. lineWidth Sets or returns the width of the current line. miterLimit Sets or returns the maximum miter length. lineDashOffset Sets or returns the offset for line dash patterns.
Method Description getLineDash() Returns the current line dash pattern as an array of numbers. setLineDash() Sets the line dash pattern from an array of numbers (e.g. [5, 3]).
Rectangles
Method Description rect() Creates rectangles. fillRect() Draws filled rectangles. strokeRect() Draws rectangular outlines. clearRect() Clears the specified pixels within a particular rectangle.
Paths
Method Description fill() Fills the current sub-path(s) with the current fillStyle. stroke() Strokes the current sub-path(s) with the current strokeStyle. beginPath() Begins a new path or resets the current path. moveTo() Moves the path to the defined point in the canvas without drawing a line. closePath() Adds a path from the current point back to the start point. lineTo() Adds a line to the current sub-path. clip() Creates a clipping region from the current path. quadraticCurveTo() Adds a quadratic Bézier curve. bezierCurveTo() Adds a cubic Bézier curve. arc() Adds an arc/curve for creating circles or parts of circles. arcTo() Adds an arc/curve between two tangents. ellipse() Adds an elliptical arc to the path. isPointInPath() Defines whether the specified point is in the current path, or not.
Method Description scale() Scales up or scales down the current drawing. rotate() Rotates the current drawing. translate() Adjusts the coordinate system of the canvas. transform() Applies transformation matrix to the canvas. setTransform() Is similar to transform(). Can be used to skew, scale, and translate the canvas. resetTransform() Resets the current transform to the identity matrix.
See Canvas coordinates for how the transformation matrix maps drawing positions to pixels.
Text
Property Description font Sets the appearance of a text drawn on the canvas. textAlign Sets the alignment of a text drawn on the canvas. textBaseline Sets the vertical alignment of a text drawn on the canvas. direction Sets or returns the text direction (ltr, rtl, or inherit).
Method Description fillText() Adds text to the canvas. strokeText() Adds outlined text to the canvas. measureText() Measures the text width.
See the Canvas text tutorial for full examples.
Image Drawing
Property Description imageSmoothingEnabled Sets or returns whether scaled images are smoothed (true) or pixelated (false).
Method Description drawImage() Draws an image, video, or canvas onto the canvas.
Pixel Manipulation
The properties below belong to the ImageDatacreateImageData() / getImageData(), not to the <canvas> element or the context.
ImageData property Description width Returns an ImageData object’s width in pixels. height Returns an ImageData object’s height in pixels. data Returns a Uint8ClampedArray containing the RGBA pixel data.
Method Description createImageData() Creates a new ImageData object. getImageData() Returns an ImageData object which copies the pixel data for the specified rectangle. putImageData() Puts the image data onto the canvas from the ImageData object.
Compositing
Property Description globalAlpha Sets or returns the current alpha/transparency value. globalCompositeOperation Sets or returns the type of compositing operation when a new image is drawn. filter Sets or returns a CSS filter applied to drawing (e.g. blur(4px), grayscale(1)).
Canvas state
These methods belong to the 2D context and let you save and restore the full drawing state (styles, transforms, clip region) as a stack.
Method Description save() Pushes the current state of the context onto the state stack. restore() Pops the most recently saved state, restoring those styles and transforms.
The <canvas> element
The following members belong to the <canvas> element itself, not to the 2D context.
Member Description getContext() Returns a drawing context for the canvas — pass '2d' for a CanvasRenderingContext2D. toDataURL() Returns a data URL (base64 image) of the canvas contents, e.g. 'image/png'.
Practice