Canvas basics

In this section we will learn some of the basics of using the canvas API. Now that we have a context, we can call its methods to draw lines and shapes. The API has a whole host of methods that let you draw everything from the most basic lines, to shapes, and even bitmap images.

You can find the source code for this section in chapter4/canvas-examples/canvas-examples.html.

Clearing the canvas

The background of the canvas is transparent. Whatever background color you specify for the canvas element in your CSS will show through. You can clear the canvas, or a portion of it, using the context's clearRect() method. It takes x, y, width, and height parameters and clears that part of the canvas.

context.clearRect(0, 0, canvas.width, canvas.height); ...

Get HTML5 Web Application Development By Example Beginner's guide 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.