Multiple canvas in pixijs

Question

I don't want to use multiple canvas, How can we work together for multiple canvas with pixijs?

something similar to this http://jsbin.com/judagah/edit?html,js,output

Here I am using two canvas but I want to replace in one using pixijs.

Answer 1

Pixi.js works with the concept of having multiple containers. I would advice to create one renderer with multiple containers. You can do it like this:

var renderer = PIXI.autoDetectRenderer(400, 300, {antialias: false, transparent: false, resolution: 1, view: document.getElementById("renderer")});
var mainContainer = new PIXI.Container();
var container1 = new PIXI.Container();
var graphics = new PIXI.Graphics();

And then add the containers to you mainstage:

mainContainer.addChild(container1);
mainContainer.addChild(container2);

I've made a full working fiddle which can be found here: https://jsfiddle.net/esa95wwp/