Interactive colouring page for html5 Canvas?

You just need a container object on the stage that you can attach a new Shape object to. The shape is defined programmatically using the EaselJS graphics API.

For example, where the stage has a movieclip named "myContainer":

// intialize shape

var myShape = new createjs.Shape(); // create a shape to draw in

this.myContainer.addChild(myShape); // attach the shape to a stage object

// define shape

var myPoints = [[0,0], [40, 100], [-20, 80]];

var myStrokeColor = "#0000FF";

var myFillColor = "orange";

var myStrokeWidth = 2;

// draw shape

var i;

var msg = myShape.graphics; // shortcut to the shape's graphics methods

msg.clear();

msg.setStrokeStyle(myStrokeWidth);

msg.beginStroke(myStrokeColor);

msg.beginFill(myFillColor);

for (i = 0; i < myPoints.length; i++) {

    msg.lineTo(myPoints[0], myPoints[1]);

}

msg.closePath();

msg.endStroke();

msg.endFill();

That drawing code at the end can be compacted somewhat by chaining multiple graphics API calls together, like so:

// draw shape

var i;

var msg = myShape.graphics; // shortcut to the shape's graphics methods

msg.clear().setStrokeStyle(myStrokeWidth).beginStroke(myStrokeColor).beginFill(myFillColor);

for (i = 0; i < myPoints.length; i++) {

    msg.lineTo(myPoints[0], myPoints[1]);

}

msg.closePath().endStroke().endFill();

EaselJS v0.8.2 API Documentation : Graphics