The Essential Guide to HTML5

MAZES

Code Explanation

function init(){ Function header init

ctx = document.getElementById

('canvas').getContext('2d');

Define the ctx (context) for all drawing

canvas1 = document.getElementById('canvas'); Define canvas1, used for events

canvas1.addEventListener('mousedown',

startwall,false);

Set up handling for mousedown

canvas1.addEventListener('mousemove',

stretchwall,false);

Set up handling for mousemove

canvas1.addEventListener('mouseup',finish,

false);

Set up handling for mouseup

window.addEventListener('keydown',

getkeyAndMove,false);

Set up handling for use of the arrow keys

drawall(); Draw everything

} Close function

function startwall(ev) { Function header startwall

var mx; Hold mouse x

var my; Hold mouse y

if ( ev.layerX || ev.layerX == 0) { Can we use layerX to determine the
position of the mouse? Necessary
because browsers are different.

mx= ev.layerX; Set mx

my = ev.layerY; Set my

} else if (ev.offsetX

|| ev.offsetX == 0) {

Else can we use offsetX?

mx = ev.offsetX; Set mx

my = ev.offsetY; Set my