Turn canvas objects into createjs elements

Question

Apologies if this has been answered before, I think I maybe searching for the wrong keywords.

I have an element rendered on the canvas from another library. Every time stage.update() gets called all my createJS elements get rendered on top. The element however needs to sit between different createjs objects.

So either I need to find a way to turn this element into a createJs DisplayElement to put it in the correct index position.

Or I need to update just a Container and not the whole stage.

Can someone point me into the right direction?

Thanks

Lanny Lanny · Accepted Answer · 2016-05-16T20:45:53

The best approach for this is to render your non-EaselJS content onto another Canvas, and then use it as the source for a Bitmap.

// Non-EaselJS content (whatever you can imagine!)
var canvas1 = document.getElementById("non-easel-canvas");
var context = canvas1.getContext("2d");
context.doStuffWithCanvasAPIs();

// EaselJS content (red background, blue circle)
var stage = new createjs.Stage("easel-canvas");
var bottom = new createjs.Shape();
bottom.graphics.beginFill("red").drawRect(0,0,800,600);
var top = new createjs.Shape();
top.graphics.beginFill("blue").drawCircle(0,0,25);
top.x = top.y = 100;

// Non-easel content added to Easel
var bmp = new createjs.Bitmap(canvas1);

stage.addChild(bottom, bmp, top);
stage.update();

Hope that makes sense. You can also the reverse, and draw the EaselJS content into a non-EaselJS stage using drawImage, and passing the EaselJS canvas as the source. This is how you can mix EaselJS content into things like three.js.

Note that you can also draw any EaselJS content directly without a stage. Each display object (including Container) has a draw() method, which you can call, which draws the object into a supplied context.

http://www.createjs.com/docs/easeljs/classes/DisplayObject.html#method_draw

Cheers,

Turn canvas objects into createjs elements

2 Answers