JavaScript Projects for Kids

Chapter 7. Introducing the Canvas

In this chapter, we are going to learn about HTML canvas. An HTML canvas helps you to draw, especially the graphics (for example, circles, squares, rectangles, and so on) on your HTML page. The <canvas></canvas> tags are usually controlled by JavaScript. Canvas can draw texts, which can also be animated. Let's see what we can do using the HTML canvas.

Implementing canvas

To add canvas on your HTML page, you need to define the height and width of your canvas in the <canvas></canvas> tags as shown in the following:

<html>
  <head>
    <title>Canvas</title>
  </head>
  <body>
  <canvas id="canvasTest" width="200" height="100" style="border:2px solid #000;">

    </canvas>
  </body>
</html>

We have defined the canvas ID as canvasTest, which ...