HTML and CSS Reference
In-Depth Information
Creating a Simple Object Framework for the Canvas
Asyouhaveseenthroughoutthisbook,youcaneasilycreatealotofcodewhenworkingwith
the HTML5 Canvas. The fact is, large applications can get out of hand very easily if you put
all of your JavaScript into the main
.html
file. However, to become efficient when developing
applications for the HTML5 Canvas, you will need to develop a framework for your applic-
ations. There are many freely available frameworks that exist right now for you to use (for
example,
Impact.js
,
Easel.js
), but we are going to focus on creating our own small framework
for Canvas application development.
In this section, we will create a drag-and drop-application. You will click on colored “bulbs”
and decorate a Christmas tree, shown in
Figure 11-7
.
This might seem like a simple applica-
tion,butitwillrequireustocreateasystemthatrecognizesmouseclicks,draggingitems,and
keeping track of an infinite number of objects.
Figure 11-7. Drag-and-drop application example
