This function actually draws the line and is used to handle the mousemove event. This is our main function to handle drawing.

The source code of the mousemove function is as follows:

function handleMouseMove(event) {
  var midPt = new createjs.Point(oldPt.x + stage.mouseX>> 1,oldPt.y + stage.mouseY>> 1);

  drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).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();
}

This function is called continuously while the mouse cursor is dragging over stage. In this function, we draw the line using the beginStroke function and then save the current mouse position again in order to use it in the following function calls; actually, the following mouse move. By each move of the mouse cursor, this function is called again, so we will have the line.

After that, we update the stage using the update function to apply changes to the stage and render everything to the canvas.