HTML and CSS Reference
In-Depth Information
Handling the Balls
Forthisexample, wewanttolisten foramouseclick ontheCanvas.Whentheuserclicks, we
want to create a ball that flies across the Canvas towards the piles of boxes. The first thing we
need to do is create an event listener for the mouseup event:
theCanvas . addEventListener ( "mouseup" , createBall , false
false );
Next we need to create the createBall() function. First, we get the x and y position of the
mouse from the event object passed to createBall() . Then we use some cross-browser code
to figure out the mouse position relative to the Canvas. The following boilerplate code cap-
tured (at the time of this writing) the proper x and y mouse position on the Canvas:
function createBall ( event ) {
var x ;
var y ;
iif ( event . pageX || event . pageY ) {
x = event . pageX ;
y = event . pageY ;
else {
x = e . clientX + document . body . scrollLeft +
document . documentElement . scrollLeft ;
y = e . clientY + document . body . scrollTop +
document . documentElement . scrollTop ;
x -= theCanvas . offsetLeft ;
y -= theCanvas . offsetTop ;
mouseX = x ;
mouseY = y ;
Becausewearecapturingthemouse x and y positionrelativetotheCanvas,youneedtomake
sure that the <canvas> element in the HTML page is styled with top and left values so that
the offsetLeft and offsetTop values are correct. For example, if you position the Canvas
inside a <div> at 50,50 and leave the left and top style values at 0 , the mouse clicks will
not be captured in the correct locations:
<canvas id= "canvasOne" width= "450" height= "350"
style= "position: absolute; top: 0px; left: 0px;" >
Your browser does not support the HTML5 Canvas.
<canvas id= "canvasTwo" width= "450" height= "350"
style= "position: absolute; top: 0px; left: 451px;" >
Search WWH ::

Custom Search