HTML canvas - how to use <canvas> tag

The HTML <canvas> tag is a container that can be used to draw graphics on the fly via JavaScript.

Attributes

The canvas tag supports the global and event attributes.

height
This indicates the height of the canvas in pixels.
width
This indicates the width of the canvas in pixels.

Examples:

<div> <canvas id="canvas" width="300" height="300"> An alternative text describing what your canvas displays. </canvas> </div> <div> <canvas id="myCanvas"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 80, 80); </script> </div>