The <canvas> element defines a bitmapped area in an HTML page.
The Canvas API allows JavaScript to draw graphics on the canvas.
The Canvas API can draw shapes, lines, curves, boxes, text, and images, with colors, rotations, transparencies, and other pixel manipulations.
You can add a canvas element anywhere in an HTML page with the
<canvas> tag:
You can access a <canvas> element with the HTML
DOM method getElementById().
To draw in the canvas you need to create a 2D context object:
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
The HTML <canvas> element itself has no drawing abilities.
You must use JavaScript to draw any graphics.
The getContext() method returns an object
with tools (methods) for drawing.
After you have created a 2D context, you can draw on the canvas.
The fillRect() method draws a black rectangle with a top-left corner at position 20,20. The rectangle is 150 pixel wide and 100 pixels high.
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
The fillStyle property sets the fill color of the drawing object:
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
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:
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
Try it Yourself »
The common way to draw on the canvas is to:
Example
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();
Try it Yourself »
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.
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 |
| 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 |
| 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() |
| Method | Description |
|---|---|
| drawImage() | Draws an image, canvas, or video onto the canvas |
| 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 |
| 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 |
The canvas object also supports the standard properties and events.
Canvas tutorial: Canvas Tutorial
HTML tutorial: HTML5 Canvas
HTML reference: HTML <canvas> tag
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 |