HTML5 Digital Classroom

Lesson 10: Working with Canvas

Canvas is a two-dimensional drawing API that is part of the HTML5 specification. The inclusion of a native drawing API enables developers to create drawings dynamically on a web page, often based on retrieved data or user interaction. Unlike the familiar formats for images such JPGs and PNGs, drawings created with Canvas can be updated in real-time.

What you’ll learn in this lesson:

• • Understanding the Canvas element
• • Drawing shapes and paths
• • Applying colors and gradient brushes
• • Animating compositions

Starting up

You will work with several files from the HTML5_10lessons folder in this lesson. Make sure you have loaded the HTML5lessons folder onto your hard drive from www.digitalclassroombooks.com/HTML5. See “Loading lesson files” in the Starting Up section of this book.

To accurately preview the HTML5 content you will create in this lesson, you need a browser that supports HTML5 tags. See “Using web browsers that support HTML5 tags” in the Starting Up section of this book to determine whether you are using such a browser, or for instructions on downloading one.

You can use the Canvas HTML element to define the drawing surface, but you must define the drawing instructions and the resulting lines, shapes, and colors in JavaScript. In this lesson, you will learn the fundamentals of the Canvas API, which include drawing shapes, paths, text and ...