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();
3.146.37.250