Further Explorations - HTML5 Canvas - page 925

DragAndDrop.html

Because we have moved almost all the code out of the HTML file, here is our “almost” bare-
bones HTML file that starts the drag-and-drop application.
We need to include all the files we just created:

< script type = "text/javascript" src = "EventDispatcher.js" >< /script>
< script type = "text/javascript" src = "DisplayList.js" >< /script>
< script type = "text/javascript" src = "GameUtilities.js" >< /script>
< script type = "text/javascript" src = "DragAndDrop.js" >< /script>
< script type = "text/javascript" src = "Ornament.js" >< /script>
< script type = "text/javascript" src = "modernizr.js" >< /script>

We need to create the canvas in HTML. For this application, we will center it on the screen:

<div <div align= "center" >

<canvas

<canvas id= "canvasOne" width= "640" height= "480" style= "cursor: default;" >
Your browser does not support the HTML 5 Canvas.
</canvas> </canvas>

</div> </div>

Finally, we need to start the app when the window has loaded:

< script type = "text/javascript" >
window . addEventListener ( "load" , eventWindowLoaded , false false );

function function eventWindowLoaded () {

DragAndDrop ();

}
< /script>

We have now created a very simple object-oriented structure for a Canvas application. With
this application, we have attempted to solve some glaring application development issues that
occur when creating Canvas applications. We have created a way to subscribe to and broad-
cast events from logical objects on the canvas, a way to find and click on individual objects
on the canvas, and we keep track of those objects using a display list that simulates “retained
mode.” While there are many ways this object model could be improved, we feel that this is a
good starting point for your future endeavors with the HTML5 Canvas.
You can test this example by finding dragandrop.html in the code distribution (in the
Chapter 11 /draganddrop folder) and opening it in your web browser.