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.