HTML and CSS Reference
In-Depth Information
must be lowercase for this function to work correctly. You will call methods on this context in order to draw
onto the canvas.
window.onload = function() {
var adCanvas = document.getElementById(“adCanvas");
if (adCanvas.getContext) {
// Initialize a 2d drawing context.
var ctx = adCanvas.getContext(“2d");
}
}
5.
Save the
adscript.js
file.
Congratulations! You now have your canvas set up and you're ready to start drawing on it.
The
context
holds all the information about your canvas, such as the objects that you will be drawing and any styl-
ing that you might add. It also provides the functions that you need to draw and paint on the canvas. The
2d
value
that is passed to the
getContext()
function signals that you want to use the 2D drawing API.
Creating the Background
In this section, you will add a rectangle to your canvas that will make up the advertisement's background. However,
before you get to that, you need to know a few things about how Canvas works.
Think of a canvas as a big grid in which each square represents a single pixel on the screen. When you draw using
the Canvas API, you need to specify where on the canvas you want the object to be drawn. You do this using
x
and
y
coordinates relative to the origin of the grid. The origin (0, 0) is in the top-left corner of the canvas (see Figure 14-2).
Although it is possible to change this origin point, you won't need to in this project.
