Step 11: Canvas

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;”>
</canvas>

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.

Now, unlike the <svg>-element, you need to use Javascript to draw within the <canvas>-element. There are no HTML-elements available to do this. Because I don’t deal with Javascript in this course, you can best Google the <canvas>-element to find out more.

Go to the next step.

Bookmark the permalink.

Comments are closed.