HTML and CSS Reference
In-Depth Information
Chapter 10
Canvas
In this chapter I'll show how to use the
canvas
element in HTML5 to create some fun graphics. As you'll see, it is
very different from SVG, which you explored in the previous chapter. I will discuss the differences in more detail
later but the main thing you'll notice is that canvas is completely implemented in JavaScript. The only part that is
in the markup is a simple element definition like this:
<canvas id="myCanvas" width="400" height="400">
Canvas is not supported on this browser
</canvas>
Instead, you'll define the content by calling the various drawing methods using JavaScript. Just like with the
audio
and
video
elements, the markup within the
canvas
element is used when the browser does not support
canvas. You can use this to provide the appropriate fallback content.
Through the exercises in the chapter, you will create three different canvas implementations that,
collectively, will demonstrate the capability of canvas. You will create:
•
A chess board with moving chess pieces
•
A simple model of our solar system
•
A page that demonstrates the various ways shapes can be composited.
Of course, you can use your imagination to apply these principles in any number of fun and compelling
graphical applications.
Creating a Chess Board
In the first application you'll draw a chess board, which is just a series of squares with alternating colors. I'll
show you how to use a gradient to make the board a little more interesting. You'll use image files to draw the
chess pieces in the appropriate squares. Finally you'll apply a little bit of animation to move the pieces around
the board. This will give you a good sense of how basic drawing techniques are used before getting into more
advanced topics.
Creating the Visual Studio Project
You'll start by creating a Visual Studio project using the same Basic MVC template that you have used in previous
chapters.
