HTML and CSS Reference
In-Depth Information
<script> …. </script>
</head>
<body>
… Here is where the initial static content will go…
</body>
</html>
To work with the
canvas
, we include the tags for
canvas
in the
body
element of the HTML document and
JavaScript in the
script
element. I'll start by describing a standard way to write a
canvas
element.
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
If an HTML file with this coding is opened by a browser that does not recognize canvas, the message
Your
browser doesn't support the HTML5 element canvas.
appears on the screen. If you were
preparing web pages for all common browsers, you could choose to direct visitors to your site to
something else or try another strategy. In this topic, I just focus on HTML5.
The HTML
canvas
tag defines this element to have an
id
of "canvas". This could have been anything, but
theres no harm in using canvas. You can have more than one canvas, however, and in that case, you
would need to use distinct values for each id. Thats not what we do for this application, though, so we
dont have to worry about it. The attributes of
width
and
height
are set to specify the dimensions of this
canvas element.
Now that weve seen the canvas in the
body
, lets look at the JavaScript. The first step in drawing on the
canvas is to define the appropriate object in the JavaScript code. To do this, I need a variable so I set up
one named
ctx
with the line
var ctx;
outside of any function definition. This makes it a global variable that can be accessed or set from any
function. The
ctx
variable is something thats needed for all drawing. I chose to name my variable
ctx
,
short for context, copying many of the examples Ive seen online. I could have chosen any name.
Later in the code (youll see all the code in the examples that follow, and you can download it from
ctx = document.getElementById('canvas').getContext('2d');
What this does is first get the element in the document with the id
'canvas'
and then extract what is
called the '2d' context. We can all anticipate that the future may bring other contexts! For now, we use the
2d one.
In the JavaScript coding, you can draw rectangles, paths including line segments and arcs, and position
image files on the canvas. You can also fill in the rectangles and the paths. Before we do this, however,
we need to tackle coordinate systems and radian measures.
Just as a global positioning system uses latitude and longitude to define your location on the map, we
need a way to specify points on the screen. These points are called pixels, and we used them in the
previous chapter to specify the width of images and the thickness of borders. The pixel is a pretty small
unit of measurement, as you can see if you do any experiments. However, its not enough for everyone to
agree on the linear unit. We also need to agree on the point from which we are measuring, just as GPS
systems use the Greenwich Meridian and the equator. For the two-dimensional rectangle that is the
