Canvas API

The <canvas> element defines a bitmap area in the 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, as well as colors, rotations, opacity, and other pixel operations.

Add Canvas to HTML

You can add a canvas element at any position in the HTML page using the <canvas> tag:

Instance

<canvas id="myCanvas" width="300" height="150"></canvas>

Try it yourself

How to access the Canvas element

You can access the <canvas> element using the HTML DOM method getElementById():

const myCanvas = document.getElementById("myCanvas");

To draw on the canvas, you need to create a 2D context object:

const ctx = myCanvas.getContext("2d");

Note

The HTML <canvas> element itself does not have drawing capabilities.

You must use JavaScript to draw any graphics.

The getContextMenu() method returns an object with drawing tools (methods).

Drawing on the canvas

After creating the 2D context object, you can draw on the canvas.

The following fillRect() method draws a black rectangle with its top-left corner at position 20,20. The rectangle is 150 pixels wide and 100 pixels high:

Instance

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);

Try it yourself

Using color

The fillStyle property sets the fill color of the drawing object:

Instance

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 using the document.createElement() method and add it to an existing HTML page:

Instance

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

Path

Common methods for drawing on the canvas are:

1. Start a path - beginPath()
2. Move to a point - moveTo()
3. Draw in the path - lineTo()
4. Draw a path - stroke()

Instance

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