Inside the init
function, we will setup the stage, declare the basic variables, and also attach functions to the main events like the mousedown
event.
The following code is the source code of the init
function:
function init() { var canvas = document.getElementById("cvs"); var index = 0; var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"]; var stage = new createjs.Stage(canvas); stage.autoClear = false; stage.enableDOMEvents(true); createjs.Touch.enable(stage); createjs.Ticker.setFPS(24); drawingCanvas = new createjs.Shape(); stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); stage.addChild(drawingCanvas); stage.update(); }
In the first line of the function's body, we have a global canvas
variable, which refers to our Canvas
element in the page. We have an index
variable that holds a counter to choose a color for brushes while painting and the next line contains an array of colors. We choose one value from this array randomly using the index
variable. After that, as seen in previous examples, we have to create a stage
object; this is also a global variable.
After that, we set the autoClear
property of stage
to false
. This property indicates whether the stage should clear the rendered elements on the canvas automatically or not. By setting this value to false
, we can manually control the clearing.
Then, we enabled the DOM (Document Object Model) events using the enableDOMEvents
method. This method actually enables or disables the event listener, which stage
adds to DOM elements such as window, document, and canvas.
In the following lines, touch events and frames per second (FPS) are configured. The setFPS
function sets the target frame rate in frames per second. This function is a member o f the Ticker
class. The Ticker
class is one of the major features of EaselJS that provides a centralized ticker or heartbeat and listeners can subscribe to the ticker event to be notified when time elapsed.
Then, the global variable drawingCanvas
is initialized with a Shape
object and it will be our painting shape. In the following events, we will use this variable to complete the drawing process.
Further, the mousedown
and mouseup
events are assigned to proper functions and then a painting shape is added to stage
. There are some ways to add an event listener and one of them is using the addEventListener
function. Pass the name of the event and the function to it. We used the addEventListener
function in this example.
Similar to the previous examples, we have to add the shape to stage
and update it using the update
function. In the following lines, we added the shape to stage
and updated it.
This is the definition of the init
function. Actually, this function is a bootstrap function to start the painting application. Inside this function, all events to paint and draw are configured. In the following sections, we will discuss the event callback function.
3.139.107.210