Interactive colouring page for html5 Canvas?

[mercedesc43970157]

Hi,

I would like to be able to make a simple interactive coloring activity on Animate html canvas, and I could not find any tutorial that deals with this topic.

My beloved code in AS2 was based on areas to fill that were buttons with AS:

on(release){

iColor = new Color (this);

iColor.setRGB(_root.fillColor);

delete iColor;

}

And in a palette where each color is also a button with AS:

on(realease){

fillColor = (the HexCode for that color);

}

I honestly have no idea how to translate this to javascript.

If anyone can help me I will be very grateful, regards.

[ClayUUID]

RGB filters are very slow in HTML because the canvas element doesn't natively support them, so they have to be emulated in JavaScript. You'd be best off using the drawing API to redraw each colored region from scratch in the requested color.

Canvas mode uses CreateJS, which comprises a set of multimedia APIs. All drawing functions are in EaselJS.

EaselJS v0.8.2 API Documentation : EaselJS

[mercedesc43970157]

Thanks for your answer

Could you refer me some link where I can see something like that in the context of animate cc?

[ClayUUID · Accepted solution]

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