How do I draw/paint lines on top of a Bitmap using EaselJS?

Question

I'm trying to use the sample from the createJS/easelJS site where it sets up a createjs.Shape() and adds it as a child to the createjs.stage().

Then using the mousedown/mousemove/mouseup handlers, the stage is updated using the graphics methods - setStrokeStyle, beginStroke, and curveTo.

The main difference is that I'm also adding a new Bitmap(url) and also adding it as a child to my stage (before adding the createjs.Shape for drawing).

However, when I test it, I can only "draw" on the areas not occupied by the Bitmap. How can I get this to work, so I can draw/paint on top of the Bitmap?

The end goal is a coloring page - being able to add different black&white images and have multiple color brushes to color it in.

Answer 1

Nevermind, I got it working by creating the new createjs.Bitmap object from an Image object instead of passing the url of the image to the Bitmap's constructor. Then adding both my drawingCanvas's createjs.Shape object and Bitmap's object to the loaded event handler. So this works:

var image, stage, drawingCanvas, bitmap;
function init(){
 image = new Image();
 image.onload = handleImgLoad();
 image.src = 'image-source-url.png';
 stage = new createjs.Stage("testCanvas");
 createjs.Touch.enable(stage);
 drawingCanvas = new createjs.Shape();
}

function handleImgLoad(){
 bitmap = new createjs.Bitmap(image);
 stage.addChild(bitmap, drawingCanvas);

 ... code to handle mouseup/down/move events...
}