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

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