Further Explorations - HTML5 Canvas - page 923

}

}

}

}

}

Nowweneed tocreate the function totest whether the bulbbeing dragged isthe same onewe
aretestingin onCBulbClicked() .Todothis,wesimplyloopthroughthe bulbs arrayandsee
whether any bulb has its dragging property set to true :

function function currentlyDragging () {

isDragging = false false

for for ( var var i = 0 ; i < bulbs . length ; i ++ ) {

iif ( bulbs [ i ]. dragging ) {
isDragging = true true ;

}

}
return return isDragging ;

}

When the user clicks (a mouseup event is fired on the Canvas DOM object), we want to send
a message to the display list so that we can check to see whether any of the objects in the list
have been clicked:

function function onMouseUp ( event ) {

displayList . onMouseUp ( event );

}

When a mousemove event is fired on the Canvas DOM object, we want to do two things:
1. Move the bulb that is currently being dragged to be under the mouse pointer by setting
its x and y properties to the x and y location of the mouse.
2. Check to see whether the mouse is over any clickable objects, and if so, change the
look of the pointer to “hand” (to signify a button), using CSS. We do this by looping
through all of the Ornament objects (both factory and copy ones) and checking a hit
test point collision detection routine to see whether the mouse is over any of them. If it
isoverone,wesetthestyleofthemouseto “pointer” (bysettingthecursorvariable).
If not, we set it to “default” . Then we update the style like this:

theCanvas . style . cursor = cursor ;
function function onMouseMove ( event ) {

var var x ;