title: Multiple canvas combined from animated CC ? Possible?
body: <p>I did not get an answer to this <a href="https://stackoverflow.com/questions/48883819/fix-position-top-left-when-zoom-in-createjs">question</a> so I decided to separate the animation. Now I am looking to combine 2 canvas.</p>
  
  <p>first canvas:   </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="authoring-tool" content="Adobe_Animate_CC"&gt;
  &lt;title&gt;ipzk&lt;/title&gt;
  &lt;!-- write your code here --&gt;
  &lt;style&gt;
    body {
      overflow:hidden;
    }
    #animation_container {
      position:absolute;
      margin:auto;
      left:-100%;right:-100%;
      top:-100%;bottom:-100%;
    }
  &lt;/style&gt;
  &lt;script src="https://code.createjs.com/createjs-2015.11.26.min.js"&gt;&lt;/script&gt;
  &lt;script src="ipzk.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
  function init() {
      canvas = document.getElementById("canvas");
      anim_container = document.getElementById("animation_container");
      dom_overlay_container = document.getElementById("dom_overlay_container");
      var comp=AdobeAn.getComposition("3233CBCD1A1D3C42ABE1CA5E1A3C8363");
      var lib=comp.getLibrary();
      handleComplete({},comp);
  }
  function handleComplete(evt,comp) {
      //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
      var lib=comp.getLibrary();
      var ss=comp.getSpriteSheet();
      exportRoot = new lib.ipz();
      stage = new lib.Stage(canvas);
      stage.enableMouseOver();    
      //Registers the "tick" event listener.
      fnStartAnimation = function() {
          stage.addChild(exportRoot);
          createjs.Ticker.setFPS(lib.properties.fps);
          createjs.Ticker.addEventListener("tick", stage);
      }       
      //Code to support hidpi screens and responsive scaling.
      function makeResponsive(isResp, respDim, isScale, scaleType) {      
          var lastW, lastH, lastS=1;      
          window.addEventListener('resize', resizeCanvas);        
          resizeCanvas();     
          function resizeCanvas() {           
              var w = lib.properties.width, h = lib.properties.height;            
              var iw = window.innerWidth, ih=window.innerHeight;          
              var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
              if(isResp) {                
                  if((respDim=='width'&amp;&amp;lastW==iw) || (respDim=='height'&amp;&amp;lastH==ih)) {                    
                      sRatio = lastS;                
                  }               
                  else if(!isScale) {                 
                      if(iw&lt;w || ih&lt;h)                        
                          sRatio = Math.min(xRatio, yRatio);              
                  }               
                  else if(scaleType==1) {                 
                      sRatio = Math.min(xRatio, yRatio);              
                  }               
                  else if(scaleType==2) {                 
                      sRatio = Math.max(xRatio, yRatio);              
                  }           
              }           
              canvas.width = w*pRatio*sRatio;         
              canvas.height = h*pRatio*sRatio;
              canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';               
              canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
              stage.scaleX = pRatio*sRatio;           
              stage.scaleY = pRatio*sRatio;           
              lastW = iw; lastH = ih; lastS = sRatio;            
              stage.tickOnUpdate = false;            
              stage.update();            
              stage.tickOnUpdate = true;      
          }
      }
      makeResponsive(true,'both',true,2); 
      AdobeAn.compositionLoaded(lib.properties.id);
      fnStartAnimation();
  }
  &lt;/script&gt;
  &lt;!-- write your code here --&gt;
  &lt;/head&gt;
  &lt;body onload="init();" style="margin:0px;"&gt;
      &lt;div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:620px; height:550px"&gt;
          &lt;canvas id="canvas" width="620" height="550" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"&gt;&lt;/canvas&gt;
          &lt;div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:620px; height:550px; position: absolute; left: 0px; top: 0px; display: block;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>second canvas:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="authoring-tool" content="Adobe_Animate_CC"&gt;
  &lt;title&gt;minipz&lt;/title&gt;
  &lt;!-- write your code here --&gt;
  &lt;script src="https://code.createjs.com/createjs-2015.11.26.min.js"&gt;&lt;/script&gt;
  &lt;script src="minipz.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
  function init() {
      canvas = document.getElementById("canvas");
      anim_container = document.getElementById("animation_container");
      dom_overlay_container = document.getElementById("dom_overlay_container");
      var comp=AdobeAn.getComposition("A0BE97CBA444F248B8DE9B8DD081D02C");
      var lib=comp.getLibrary();
      handleComplete({},comp);
  }
  function handleComplete(evt,comp) {
      //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
      var lib=comp.getLibrary();
      var ss=comp.getSpriteSheet();
      exportRoot = new lib.minipz();
      stage = new lib.Stage(canvas);
      stage.enableMouseOver();    
      //Registers the "tick" event listener.
      fnStartAnimation = function() {
          stage.addChild(exportRoot);
          createjs.Ticker.setFPS(lib.properties.fps);
          createjs.Ticker.addEventListener("tick", stage);
      }       
      //Code to support hidpi screens and responsive scaling.
      function makeResponsive(isResp, respDim, isScale, scaleType) {      
          var lastW, lastH, lastS=1;      
          window.addEventListener('resize', resizeCanvas);        
          resizeCanvas();     
          function resizeCanvas() {           
              var w = lib.properties.width, h = lib.properties.height;            
              var iw = window.innerWidth, ih=window.innerHeight;          
              var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
              if(isResp) {                
                  if((respDim=='width'&amp;&amp;lastW==iw) || (respDim=='height'&amp;&amp;lastH==ih)) {                    
                      sRatio = lastS;                
                  }               
                  else if(!isScale) {                 
                      if(iw&lt;w || ih&lt;h)                        
                          sRatio = Math.min(xRatio, yRatio);              
                  }               
                  else if(scaleType==1) {                 
                      sRatio = Math.min(xRatio, yRatio);              
                  }               
                  else if(scaleType==2) {                 
                      sRatio = Math.max(xRatio, yRatio);              
                  }           
              }           
              canvas.width = w*pRatio*sRatio;         
              canvas.height = h*pRatio*sRatio;
              canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';               
              canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
              stage.scaleX = pRatio*sRatio;           
              stage.scaleY = pRatio*sRatio;           
              lastW = iw; lastH = ih; lastS = sRatio;            
              stage.tickOnUpdate = false;            
              stage.update();            
              stage.tickOnUpdate = true;      
          }
      }
      makeResponsive(false,'both',false,1);   
      AdobeAn.compositionLoaded(lib.properties.id);
      fnStartAnimation();
  }
  &lt;/script&gt;
  &lt;!-- write your code here --&gt;
  &lt;/head&gt;
  &lt;body onload="init();" style="margin:0px;"&gt;
      &lt;div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:130px; height:100px"&gt;
          &lt;canvas id="canvas" width="130" height="100" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"&gt;&lt;/canvas&gt;
          &lt;div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:130px; height:100px; position: absolute; left: 0px; top: 0px; display: block;"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the variables are identical, I tried to make new variables but only the second canvas is displayed. </p>
  
  <p>I tried canvas2, stage2, anim_container2, dom_overlay_container2, comp2, lib2, ss2, handleComplete2, makeResponsive2 ...</p>
  
  <p>The second should be above the first.
  Thank you</p>