HTML Canvas Reference
HTML <canvas> and Canvas API
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
The Canvas API allows JavaScript to draw on the canvas, and has several methods for drawing paths, boxes, circles, text, and adding images.
Canvas is supported by all major browsers.
You can add a canvas element anywhere in an HTML page with the <canvas> tag:
You can access a <canvas> element with the getElementById() method.
The getContext() method returns an object with tools (methods) for drawing.
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
Drawing on the Canvas
After you have created a 2D context, you can draw on the canvas.
The fillStyle property sets the fill color of the drawing object.
The fillRect() method draws a "filled" rectangle on the canvas.
The following example draws a red rectangle on the canvas, from position (20,20) with a width of 150 pixel and a height of 100 pixels:
Example
<script>
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
</script>
Try it Yourself »
You can also create a new <canvas> element
with the document.createElement() method,
and add the element to an existing HTML page:
Example
<script>
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
</script>
Try it Yourself »
Complete Canvas API Reference
This reference covers all Properties and Methods of the getContext("2d") Object, used to draw text, lines, boxes, circles, pictures, and more on the canvas.
Drawing Methods
There are only 3 methods to draw directly on the canvas:
| Method | Description |
|---|---|
| fillRect() | Draws a "filled" rectangle |
| strokeRect() | Draws a rectangle (with no fill) |
| clearRect() | Clears specified pixels within a rectangle |
Path Methods
| Method | Description |
|---|---|
| beginPath() | Begins a new path or resets the current path |
| closePath() | Adds a line to the path from the current point to the start |
| isPointInPath() | Returns true if the specified point is in the current path |
| moveTo() | Moves the path to a point in the canvas (without drawing) |
| lineTo() | Adds a line to the the path |
| fill() | Fills the current path |
| rect() | Adds a rectangle to the path |
| stroke() | Draws the current path |
| Circles and Curves | |
| bezierCurveTo() | Adds a cubic Bézier curve to the path |
| arc() | Adds an arc/curve (circle, or parts of a circle) to the path |
| arcTo() | Adds an arc/curve between two tangents to the path |
| quadraticCurveTo() | Adds a quadratic Bézier curve to the path |
Text
| Method/Prop | Description |
|---|---|
| direction | Sets or returns the direction used to draw text |
| fillText() | Draws "filled" text on the canvas |
| font | Sets or returns the font properties for text content |
| measureText() | Returns an object that contains the width of the specified text |
| strokeText() | Draws text on the canvas |
| textAlign | Sets or returns the alignment for text content |
| textBaseline | Sets or returns the text baseline used when drawing text |
Colors, Styles, and Shadows
| Method/Property | Description |
|---|---|
| addColorStop() | Specifies the colors and stop positions in a gradient object |
| createLinearGradient() | Creates a linear gradient (to use on canvas content) |
| createPattern() | Repeats a specified element in the specified direction |
| createRadialGradient() | Creates a radial/circular gradient (to use on canvas content) |
| fillStyle | Sets or returns the color, gradient, or pattern used to fill the drawing |
| lineCap | Sets or returns the style of the end caps for a line |
| lineJoin | Sets or returns the type of corner created, when two lines meet |
| lineWidth | Sets or returns the current line width |
| miterLimit | Sets or returns the maximum miter length |
| shadowBlur | Sets or returns the blur level for shadows |
| shadowColor | Sets or returns the color to use for shadows |
| shadowOffsetX | Sets or returns the horizontal distance of the shadow from the shape |
| shadowOffsetY | Sets or returns the vertical distance of the shadow from the shape |
| strokeStyle | Sets or returns the color, gradient, or pattern used for strokes |
Transformations
| Method | Description |
|---|---|
| scale() | Scales the current drawing bigger or smaller |
| rotate() | Rotates the current drawing |
| translate() | Remaps the (0,0) position on the canvas |
| transform() | Replaces the current transformation matrix for the drawing |
| setTransform() | Resets the current transform to the identity matrix. Then runs transform() |
Image Drawing
| Method | Description |
|---|---|
| drawImage() | Draws an image, canvas, or video onto the canvas |
The ImageData Object / Pixel Manipulation
| Method/Property | Description |
|---|---|
| createImageData() | Creates a new, blank ImageData object |
| getImageData() | Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas |
| ImageData.data | Returns an object that contains image data of a specified ImageData object |
| ImageData.height | Returns the height of an ImageData object |
| ImageData.width | Returns the width of an ImageData object |
| putImageData() | Puts the image data (from a specified ImageData object) back onto the canvas |
Compositing
| Property | Description |
|---|---|
| globalAlpha | Sets or returns the current alpha or transparency value of the drawing |
| globalCompositeOperation | Sets or returns how a new image are drawn onto an existing image |
Other Methods
| Method | Description |
|---|---|
| clip() | Clips a region of any shape and size from the original canvas |
| save() | Saves the state of the current drawing context and all its attributes |
| restore() | Restores the previously saved state and attributes |
| createEvent() | |
| getContext() | |
| toDataURL() |
Standard Properties and Events
The canvas object also supports the standard properties and events.
Related Pages
Canvas tutorial: Canvas Tutorial
HTML tutorial: HTML5 Canvas
HTML reference: HTML <canvas> tag
Browser Support
The <canvas> element is an HTML5 standard (2014).
Canvas API is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
