Canvas for Publishers - HTML5 for Publishers - page 9

canvasApp();
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
} else {
var theCanvas = document.getElementById('canvas');
var context = theCanvas.getContext('2d');
}
initGraphCalculator();
var graph_in_progress = "no"
function initGraphCalculator() {
drawGrid();
var y_equals_x_button = document.getElementById("y_equals_x");
y_equals_x_button.addEventListener('click', y_equals_xPressed, false);
var y_equals_negative_x_button =
document.getElementById("y_equals_negative_x");
y_equals_negative_x_button.addEventListener('click',
y_equals_negative_xPressed, false);
var y_equals_two_x_button = document.getElementById("y_equals_two_x");
y_equals_two_x_button.addEventListener('click', y_equals_two_xPressed, false);
var y_equals_one_half_x_button =
document.getElementById("y_equals_one_half_x");
y_equals_one_half_x_button.addEventListener('click',
y_equals_one_half_xPressed, false);
var reset_grid_button = document.getElementById("reset_grid");
reset_grid_button.addEventListener('click', reset_grid_buttonPressed, false);
status_message = document.getElementById("status_message");
}
First, when the window finishes loading, we check and see if the user's environment
supports the <canvas> tag (if not, the code stops executing). Then, drawGrid() is trig-
gered, and event listeners are added to the buttons below the graphing calculator, so
that when the user clicks them, the corresponding functions will be executed:
function y_equals_xPressed(e) {
draw_grid_line(1, "green");
}
function y_equals_negative_xPressed(e) {
draw_grid_line(-1, "purple");
}
function y_equals_two_xPressed(e) {
draw_grid_line(2, "blue");
}