HTML and CSS Reference
In-Depth Information
code, when you can easily to add images to an HTML document the old-school way
—with an
<img>
tag!
But all that JavaScript is exactly what makes Canvas so powerful and feature-rich. Be-
cause you can directly manipulate the artwork with code, you can dynamically update
what's displayed on the
<canvas>
in real time, and in response to user input. Instead of
an inert smiley face, you can have a smiley face that winks every 18 seconds, or a smiley
face that frowns when you click on it. The possibilities are endless: from
games
and
Next, we'll look at a couple of HTML5 Canvas examples that can be used to enhance
ebook content: a graphing calculator for linear algebraic equations, and a children's
finger painting app.
Canvas Graphing Calculator
Most first-year algebra curricula contain a unit on graphing on the
Cartesian coordinate
plane
. Many students intially have some difficulty grasping the concept of representing
algebraic equations visually, as it's a real paradigm shift from traditional arithmetic.
Graphing calculators, both hardware and software, are helpful tools in the teaching
process, as they allow learners to quickly and efficiently experiment with plotting
equations, so they can understand how changes made in an equation affect the shape
of the graph.
In this section, we'll use HTML5 Canvas to implement a very basic graphing calculator
for simple linear equations that can be embedded in algebra ebooks.
Figure 1-2
displays
the graphing calculator interface we'll create: a two-dimensional coordinate plane with
x
- and
y
-axes marked in red, and a set of buttons below for graphing linear equations
on the grid.
Here's the HTML we'll use to construct the graphing calculator page. Our coordinate
plane will be constructed in the
<canvas>
element, highlighted in
bold
:
<html lang="en">
<head>
<title>Graphing Calculator</title>
<script src="modernizr-1.6.min.js" type="text/javascript"></script>
<script src="graph_calc.js" type="text/javascript"/></script>
</head>
<body>
<div>
<h1>Graphing Calculator</h1>
<p style="color: red;"><span id="status_message">Click a button below the grid to
graph an equation</span></p>
<canvas id="canvas" width="400" height="400">
Your browser does not support the HTML 5 Canvas.
</canvas>
<form>
<input type="button" id="y_equals_x" value="y = 1x" style="color: green;"/>
<input type="button" id="y_equals_negative_x" value="y = -1x" style="color: purple;"/>
