The app.js file is the main JavaScript file that contains all functionality and logic for the painting application. This file consists of five functions; one of them is the main function that performs the set up of other events and configures and creates the stage. The next three functions are the callback functions for different mouse events, and the last function is used to create a PNG image from the Canvas element. But before everything else, we have the global variable's declaration shown as follows:

var canvas, stage, drawingCanvas, oldPt, oldMidPt, bgLayer, brushColor, brushSize, bgColor, brushStyle, mouseMoveFn;

After that, we have the init function, which is the main function for the application.

 canvas = document.getElementById("pStage");

 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight - 73;

 //set default colors
 brushColor = "#004358";
 bgColor = "#FCFFF5";
 brushSize = 12;
 brushStyle = "round";

In the first line, we get the Canvas element using the getElementById function. Then we set the width and height of the Canvas element to the window's width and height to fit the canvas to the page. The reason we use -73 for the innerHeight value is to prevent vertical scrolling of the page as our header height is about 73 pixels. After that, default options are set. You can change them with to do your preferred options.

In order to bind the onclick events to the drop-down menus, we have a simple for loop that iterates over the ul items and binds the onclick event to the links:

 //bind onclick event to the brush color picker
 for (var i = document.getElementsByClassName("brushColor").length - 1; i>= 0; i--) {
    var item = document.getElementsByClassName("brushColor")[i];

    item.onclick = function () {
        brushColor = document.querySelector("#colorPicker .fill").style.backgroundColor = this.style.backgroundColor;
    }
 };

In the first line, we have a for loop that iterates over the drop-down items, and then binds an onclick event to each item. The same code is also used for other drop-down menus. Finally, we end the file with the following code:

 stage = new createjs.Stage(canvas);
 stage.autoClear = false;

 createjs.Touch.enable(stage);

 stage.on("stagemousedown", mouseDownCallback);
 stage.on("stagemouseup", mouseUpCallback);

 bgLayer = new createjs.Shape();
 bgLayer.graphics.beginFill(bgColor).drawRect(0, 0, canvas.width, canvas.height);
 stage.addChild(bgLayer);

 drawingCanvas = new createjs.Shape();
 stage.addChild(drawingCanvas);
 stage.update();

In the first line, like our previous examples, Stage is the object that is created. After that, we set the autoClear property to false in order to manage the stage object getting cleared manually. Then, we set the touch feature to enable.

We are developing a painting application so we need to bind callback functions to the mousedown, mouseup, and mousemove events in order to manage and control mouse events. In the next lines, we bind callback functions to the stagemousedown and stagemouseup events, which are used to handle the mouse-click events.

In the next lines, we create a Shape object that is used for the background layer and then we create the next shape to draw the painting lines. Both of these shapes are added to the stage using the addChild function.

The source code for the mouseDownCallback event is as follows:

oldMidPt = oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
mouseMoveFn = stage.on("stagemousemove", mouseMoveCallback);

Inside this function, we collect the current mouse cursor's coordinates and also add a callback function to the stagemousemove event.

The mouseMoveCallback function source code is shown as follows:

Var midPt = new createjs.Point(Math.floor((oldPt.x + stage.mouseX) / 2), Math.floor((oldPt.y + stage.mouseY) / 2));

drawingCanvas.graphics.setStrokeStyle(brushSize, brushStyle).beginStroke(brushColor).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

oldPt.x = stage.mouseX;
oldPt.y = stage.mouseY;

oldMidPt.x = midPt.x;
oldMidPt.y = midPt.y;

stage.update();

In the first line, we calculate the next point that we need for the moveTo function using the current mouse position and the old mouse position. In the next line, we create a stroke with the current options and move the point to the new coordinates that we have calculated in the first line. After that, old positions are updated and finally the update function is called from the stage object.

Our last callback function for events is the mouseUpCallback function. Inside this function, we unbind the callback function from stagemousemove to stop drawing, which is shown as follows:

stage.off("stagemousemove", mouseMoveFn);

The last function is the exportToImage function, which is used to get a PNG image exported from the Canvas element. In this function, we convert the Canvas element to a PNG image format with base 64 and set the output to the link's href object. There is a function called toDataUrl that converts the contents from the Canvas element to an image. The exportToImage function is called when the Export link is clicked by a user. The following code explains the same:

var dateTime = new Date();

obj.href = canvas.toDataURL();
obj.download = "paint_" + dateTime.getHours() + "-" + dateTime.getMinutes() + "-" + dateTime.getSeconds();

At the end of the file, we call the init function to start the application:

init();