Pixi.js And Adobe AnimateCC canvas

[bionicGirl]

Hi guys,

I would like to know how to be able to target an existing canvas div called 'canvas'  from within the AnimateCC code panel.

Currently I was only able to add an additional canvas, but I would like to target an EXISTING canvas with the id 'canvas'

Example files here: Download example files here

 

I have also tried to target the existing canvas like so to no avail...

(function() {

	
  var pixiHolder = document.createElement('pixiHolder');

  pixiHolder.width = 300;
  pixiHolder.height = 250;
	
  document.getElementById('canvas').appendChild(pixiHolder);
	
  renderer = new PIXI.autoDetectRenderer(pixiHolder.width, pixiHolder.height, {

    view: pixiHolder,
    transparent: false,
    backgroundColor: 0x223344

  });

Anybody have an idea how I could make this work? Would love to be able to use Pixi.js within the AnimateCC code panel and output to canvas.

 

Thank you!

 

[ivan.popelyshev]

try use pixi-animate extension. It generates pixi code. Using two different renderers on one canvas requires deep knowledge of WebGL, 2d context and at least one renderer.

[bionicGirl]

25 minutes ago, ivan.popelyshev said:

try use pixi-animate extension. It generates pixi code. Using two different renderers on one canvas requires deep knowledge of WebGL, 2d context and at least one renderer.

Thanks Ivan, I am not using web GL, but canvas to output this. I only would like to output one renderer.