HTML and CSS Reference
In-Depth Information
CHAPTER 2
Drawing on the Canvas
Using HTML5 Canvas effectively requires a strong foundation in drawing, coloring,
and transforming basic two-dimensional shapes. While the selection of built-in shapes
is relatively limited, we can draw any shape we desire using a series of line segments
called
paths
, which we will discuss in the upcoming section
“Using Paths to Create
Lines” on page 30
.
The HTML5 Canvas API is well covered in many online forms. The
W3C site has an exhaustive and constantly updated reference that de-
tails the features of the Canvas 2D Drawing API. It can be viewed at
However, this online reference lacks concrete examples on using the
API. Rather than simply reprinting this entire specification, we will
spend our time creating examples to explain and explore as many fea-
tures as we have space to cover.
The Basic File Setup for This Chapter
As we proceed through the Drawing API, all the examples in this chapter will use the
same basic file setup, shown below. Use this code as the basis for all of the examples
we create. You will only have to change the contents of the
drawScreen()
function:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2BaseFile - Template For Chapter 2 Examples</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
