In our previous chapters, you learned everything you need to know about building impressive web applications using CreateJS. In this chapter, we will wrap up everything and learn to build an actual application using CreateJS from scratch. We will develop a simple painting application with options such as the ability to change the background color, brush color, brush style, brush size, and so on. Also, you will learn about the tricks and tips that will help you develop better JavaScript libraries and applications.
In this chapter, we will cover the following topics:
- Conceptualizing the application
- Explaining the structure of the application
- Implementing every part of the application
- Getting an image exported from the
Canvaselement
To demonstrate the application development with CreateJS, we will build a painting application. In this application, we will use the EaselJS module and some pure JavaScript snippets to get an image exported from the Canvas element. As you know, EaselJS renders all outputs into a Canvas element; there are some JavaScript functions to get an image output from the Canvas element.
This application contains three files:
index.htmlapp.jsstyle.css
In the index.html file, we create the HTML elements and link external files to it. app.js is the main JavaScript file that contains almost all JavaScript code to run an application, and style.css is used to style the page, drop-down menus, and other minor elements.
We split the dependencies into different files to manage them better and provide better performance while loading the application. External static files will be cached in browsers, so users will not require to download them every time the page is refreshed.
Our painting application mainly works with EaselJS features, such as the curveTo and beginStroke functions. In order to control the application's global settings such as the background color and brush color, we have global variables that hold the settings. We will be using them in other events or functions. These variables are changed when the user clicks on the different options and menus present on the page.
The preview of the application interface is as follows:
The application has a navigation bar that consists of four drop-down menus and a title. With the drop-down menus, users can change the brush style, brush size, background color, and brush color. Also, there is an Export link that converts the Canvas element to a PNG image, and gives a download link to the user from where the user can download the image.
Our drop-down menus work with pure CSS code so we don't need any JavaScript code for them. In the next section, we will explain each part in detail.