HTML5 Canvas, 2nd Edition

Creating a Simple Object Framework for the Canvas

As you have seen throughout this book, you can easily create a lot of code when working with 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 applications. 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 application, but it will require us to create a system that recognizes mouse clicks, dragging items, and keeping track of an infinite number of objects.

Figure 11-7. Drag-and-drop application example