var image = new Image();
var drawingShape = new createjs.Shape();

displayPicture('image.jpg');
 
function displayPicture(imgPath) {
	image.onload = onLoadF;
	image.src=imgPath;
}
 
function onLoadF(e) {
	// Create a Bitmap from the loaded image
	var img = new createjs.Bitmap(e.target)
	 
	stage.addChild(img);
	//positionF(img);
	// Render Stage
	stage.update();
 
}


// Handle user input for drawing
stage.addEventListener("stagemousedown", startDrawing);
stage.addEventListener("stagemousemove", continueDrawing);
stage.addEventListener("stagemouseup", stopDrawing);

var isDrawing = false;
var lastX, lastY;

function startDrawing(event) {
    isDrawing = true;
    var pt = drawingShape.globalToLocal(event.stageX, event.stageY);
    lastX = pt.x;
    lastY = pt.y;
	updateCanvas();
}

function continueDrawing(event) {
    if (!isDrawing) return;

    var pt = drawingShape.globalToLocal(event.stageX, event.stageY);

    // Draw a line segment
    drawingShape.graphics.setStrokeStyle(40, "round").beginStroke("#000").moveTo(lastX, lastY).lineTo(pt.x, pt.y).endStroke();

    lastX = pt.x;
    lastY = pt.y;

    updateCanvas();
}

function stopDrawing(event) {
    isDrawing = false;
}


function updateCanvas() {

	image.mask = drawingShape;
	stage.addChild(drawingShape);
	stage.update();
}

updateCanvas()