HTML and CSS Reference
In-Depth Information
Chapter 15
Learning Canvas, the Hero of HTML5
What's in this chapter?
• Adding and sizing the canvas element
• Creating images from Canvas
• Drawing images, text, and paths
• Creating gradients and patterns
• Using transforms
• Learning additional Canvas effects
Wrox.com Code Downloads for this Chapter
The wrox.com code downloads for this chapter are found at
www.wrox.com/rem-
title.cgi?isbn=9781118301326
on the Download Code tab. The code is in the chapter 15 download and indi-
vidually named according to the names throughout the chapter.
Introduction
This chapter examines the Canvas API in depth. Although you've seen in the past two chapters that you can
build HTML5 games using technologies besides Canvas, from a game perspective Canvas still remains the most
flexible technology to build a game with. Previous chapters have shown how you can use Canvas to make games
using bitmapped spritesheets. Canvas, however, offers more than just a way to draw some images. It has a full
repertoire of vector drawing methods for drawing shapes and curves along with support for text, transforms, and
a variety of composition modes.
Getting Started with the Canvas Tag
You've already seen that getting a
<canvas>
element onto your page is as easy as adding the element into
your HTML document with the
width
and
height
attributes:
<canvas id="mycanvas" width='640' height='480'></canvas>
This creates an element 640 pixels wide by 480 pixels tall on the page, and by default the CSS width and
height of the
<canvas>
element are set up to match the pixel width and height.
