Mazes - The Essential Guide to HTML5 - page 237

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

Set up handling for mousemove

canvas1.addEventListener('mousemove',
stretchwall,false);

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