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 ...

Get JavaScript Projects for Kids now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial