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.