javascript - Combine multiple Canvas in a single html page -

i trying load 2 canvases on single html page (one load on desktop , 1 on mobile). believe i'm missing making each unique ids (or messed else). issue similar https://stackoverflow.com/questions/12475780/working-with-multiple-canvas-in-a-single-html-page

<style> #canvas_desktop, #canvas_mobile {     position:absolute;     margin:auto;     left:0;right:0;     top:0;bottom:0; } </style> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>  <script src="desktopscript.js"></script> <script src="mobilescript.js"></script>  <script> var canvas, stage, exportroot; function init_desktop() {     canvas = document.getelementbyid("canvas_desktop");     images = images||{};     var loader = new createjs.loadqueue(false);     loader.addeventlistener("fileload", handlefileload);     loader.addeventlistener("complete", handlecomplete);     loader.loadmanifest(lib_desktop.properties.manifest); } function handlefileload_desktop(evt) {       if (evt.item.type == "image") { images[evt.item.id] = evt.result; }  } function handlecomplete_desktop(evt) {     //this function called, irrespective of content. can use variable "stage" after created in token create_stage.     var queue = evt.target;     var ssmetadata = lib_desktop.ssmetadata;     for(i=0; i<ssmetadata.length; i++) {         ss[ssmetadata[i].name] = new createjs.spritesheet( {"images": [queue.getresult(ssmetadata[i].name)], "frames": ssmetadata[i].frames} )     }     exportroot = new lib_desktop.desktop();     stage = new createjs_desktop.stage(canvas);     stage.addchild(exportroot);      //registers "tick" event listener.     createjs.ticker.setfps(lib_desktop.properties.fps);     createjs.ticker.addeventlistener("tick", stage);             //code support hidpi screens , responsive scaling.     (function(isresp, respdim, isscale, scaletype) {                 var lastw, lasth, lasts=1;               window.addeventlistener('resize', resizecanvas);                 resizecanvas();              function resizecanvas_desktop() {                        var w = lib_desktop.properties.width, h = lib_desktop.properties.height;                         var iw = window.innerwidth, ih=window.innerheight;                       var pratio = window.devicepixelratio, xratio=iw/w, yratio=ih/h, sratio=1;                        if(isresp) {                                 if((respdim=='width'&&lastw==iw) || (respdim=='height'&&lasth==ih)) {                                         sratio = lasts;                                 }                                else if(!isscale) {                                      if(iw<w || ih<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 = w*sratio+'px';                      canvas.style.height = h*sratio+'px';             stage.scalex = pratio*sratio;                        stage.scaley = pratio*sratio;                        lastw = iw; lasth = ih; lasts = sratio;              }     })(true,'both',false,1);     }        var canvas, stage, exportroot; function init_mobile() {     canvas = document.getelementbyid("canvas_mobile");     images = images||{};     var loader = new createjs.loadqueue(false);     loader.addeventlistener("fileload", handlefileload);     loader.addeventlistener("complete", handlecomplete);     loader.loadmanifest(lib_mobile.properties.manifest); } function handlefileload_mobile(evt) {        if (evt.item.type == "image") { images[evt.item.id] = evt.result; }  } function handlecomplete_mobile(evt) {     //this function called, irrespective of content. can use variable "stage" after created in token create_stage.     var queue = evt.target;     var ssmetadata = lib_mobile.ssmetadata;     for(i=0; i<ssmetadata.length; i++) {         ss[ssmetadata[i].name] = new createjs.spritesheet( {"images": [queue.getresult(ssmetadata[i].name)], "frames": ssmetadata[i].frames} )     }     exportroot = new lib_mobile.mobile();     stage = new createjs_mobile.stage(canvas);     stage.addchild(exportroot);      //registers "tick" event listener.     createjs.ticker.setfps(lib_mobile.properties.fps);     createjs.ticker.addeventlistener("tick", stage);             //code support hidpi screens , responsive scaling.     (function(isresp, respdim, isscale, scaletype) {                 var lastw, lasth, lasts=1;               window.addeventlistener('resize', resizecanvas);                 resizecanvas();              function resizecanvas_mobile() {                         var w = lib_mobile.properties.width, h = lib_mobile.properties.height;                       var iw = window.innerwidth, ih=window.innerheight;                       var pratio = window.devicepixelratio, xratio=iw/w, yratio=ih/h, sratio=1;                        if(isresp) {                                 if((respdim=='width'&&lastw==iw) || (respdim=='height'&&lasth==ih)) {                                         sratio = lasts;                                 }                                else if(!isscale) {                                      if(iw<w || ih<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 = w*sratio+'px';                      canvas.style.height = h*sratio+'px';             stage.scalex = pratio*sratio;                        stage.scaley = pratio*sratio;                        lastw = iw; lasth = ih; lasts = sratio;              }     })(true,'both',false,1);     } </script>