HTML and CSS Reference
In-Depth Information
function y_equals_one_half_xPressed(e) {
draw_grid_line(1/2, "brown");
}
function reset_grid_buttonPressed(e) {
theCanvas.width = theCanvas.width; // Reset grid
drawGrid();
}
Now, when any of the four equation buttons is clicked, the
draw_grid_line()
function
is called with the appropriate slope and color values.
When the Reset Grid button is clicked, the
width
attribute is reset to its current value,
which results in all contents of the
<canvas>
elements being deleted. Then, the
draw
Grid()
function is called again to redraw the coordinate plane on the Canvas.
With our code complete, we're now ready to test out the graphing calculator. Go ahead
and
try it out on examples.oreilly.com
.
Figure 1-3
shows the graphing calculator in
action in the iBooks reader for iPad.
You can also
download the full graphing calculator code from GitHub
and experiment
with it locally in your Web Browser or ereader.
Canvas Finger Painting
Doing animations on the HTML5 Canvas is cool, but what's even cooler is letting the
user draw on the Canvas herself. WIth the advent of touchscreen phones, tablets, and
ereaders, this becomes even more compelling, as the user can draw directly on the
screen with her finger, rather than using a mouse or trackpad. In this section, we'll look
at how to implement a simple “finger painting” app in the Canvas, which would be a
nice fit for a children's ebook—for example, a story that lets kids draw their own il-
lustrations to accompany the text, or a preschool textbook that uses the finger painting
to teach colors and shapes.
Here's the HTML we'll use to construct the Finger Painting page; the
<canvas>
tag
which will hold the drawing area is higlighted in
bold
:
<!doctype html>
<html lang="en">
<head>
<title>Finger Painting</title>
<script src="modernizr-1.6.min.js"></script>
<script src="finger_painting.js"></script>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
<div>
