Elements – Canvas Tag

Canvas Tag

You can use a canvas to draw and animate graphics and text. The drawings are done with JavaScript, so you will want to have an id in order to select the canvas.

<canvas id="canvas" width="200px" height="200px">
</canvas>

Once you’ve made your canvas, you need to find it and make a drawing object.

// Find canvas
var canvas = document.getElementById("canvas");
// Make drawing object
var drawOnCanvas = canvas.getContext("2d");
// Draw a rectangle on the canvas!
drawOnCanvas.fillRect(50, 50, 150, 100);

Now you can use this drawing object to draw on your canvas. There are several methods and attributes you can use for your drawing, including rect(), fillStyle, and many more.

More Information:

Canvas Reference