HTML and CSS Reference
code, when you can easily to add images to an HTML document the old-school way
—with an <img> tag!
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 :
<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.
<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;"/>