In this chapter, we will create a simple painting application using almost all the EaselJS features that we have already discussed in the previous chapters. This chapter will be more interactive and challenging, as we need to wrap up everything that we have already learned. So let's get started.
In this chapter, we will cover the following topics:
- Preparing the stage
- Understanding the
mousemove,mouseup, andmousedownevents - Implementing each callback function
The overall functionality of this application is almost the same as drag-and-drop applications; we will use the mousedown, mouseup, and mousemove events to handle the painting logic. First, we will create a stage object and then an array of colors that will be used for the color of brushes. We will enable the touch feature for web browsers and for devices that support touch events. Finally, we set callback functions for the mousedown, mouseup, and mousemove events to handle the drawing feature and draw the lines.
The following screenshot shows a preview of our painting application:
The final source code consists of the following functions:
init: It is used to create the stage and prepare other objects.handleMouseDown: It is used to handle themousedownevent and bind themousemoveevent.handleMouseMove: It is used to handle themousemoveevent and draw the line.handleMouseUp: It is used to handle themouseupevent and unbind themousemoveevent to stop drawing.
The following image illustrates how the events work together to draw a line:
In further sections, we will discuss more about the source code and how it is created.