Chapter 13. The Canvas Element

JavaScript isn’t all about playing with text and numbers. You can also use JavaScript to draw pictures with the HTML canvas element, which you can think of as a blank canvas or sheet of paper. You can draw almost anything that you want on this canvas, such as lines, shapes, and text. The only limit is your imagination!

In this chapter, you’ll learn the basics of drawing on the canvas. In the following chapters, we’ll build on our knowledge to create a canvas-based JavaScript game.

Creating a Basic Canvas

As our first step in using the canvas, create a new HTML document for the canvas element, as shown in the following listing. Save this document as canvas.html:

 <!DOCTYPE html> <html> <head> <title>Canvas</title> </head> ...

Get JavaScript for Kids now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.