The <canvas>-element also allows you to draw on your website. However, in contradiction to the <svg>-element, the <canvas>-element is not seen as an object, but it’s seen as a container. This means that the browser won’t be remembering the figure, but will therefor rebuilt the graphic each time you change an attribute. The canvas itself is always a rectangle space on the website itself. But within that rectangle, you can draw paths, boxes, lines, circles, text and graphics (just like the <svg>-attribute).
Now, to create a canvas, you need the following code:
<canvas id=“TheNameOfMyCanvas“ width=“300” height=“150” style=“border:1px solid #000000;”>
The id-attribute allows you to give your canvas a name. You really need this in order to work with it. The width- and height-attribute sets the size of your rectangle. CSS is used to style it. In this case, the canvas will get a solid black (#000000) border with a thickness of 1 pixel.
Go to the next step.