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;"/>