CODEWITHSUNDEEP
javascriptcanvascreatejseaseljs
Kathlen Marella
Kathlen Marella

Reputation: 11

Turn canvas objects into createjs elements

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

Upvotes: 1

Views: 1737

Answers (2)

Lanny
Lanny

Reputation: 11294

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,

Upvotes: 2

Tiago Marinho
Tiago Marinho

Reputation: 2216

You have two options here:

Do not use the other library at all, but EaselJS only.

...or...

Use multiple canvases.

Since you need to stack this graphics object in between two easeljs objects, you would need three canvases to accomplish what you're trying to do, and two easeljs stages. Still, this is a hacky workaround for a weird problem.

Upvotes: 0

Related Questions