Styjun

IF I run the file outside of dreamweaver, it will show my animation and works just as expected, but if i try to run it inside DreamWeaver it's not going to show the animation. below are the codes that is in the html document.
I have tried to past the code in different under the body instead of the head, but still does not work.I want it to show the canvas html5 animation that I am expecting.

<!-- write your code here -->
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"> </script>
<script type="text/javascript" src="myPersonal.js"></script>

<script>
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("26C21A3F1584EC4CA407BB5C25670C54");
 var lib=comp.getLibrary();
 var loader = new createjs.LoadQueue(false);
 loader.installPlugin(createjs.Sound);
 loader.addEventListener("fileload", function(evt)handleFileLoad(evt,comp));
 loader.addEventListener("complete", function(evt)handleComplete(evt,comp));
 var lib=comp.getLibrary();
 loader.loadManifest(lib.properties.manifest);

function handleFileLoad(evt, comp) 
 var images=comp.getImages(); 
 if (evt && (evt.item.type == "image")) images[evt.item.id] = evt.result; 

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();
 var queue = evt.target;
 var ssMetadata = lib.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.personal_HTML5Canvas();
 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)
 stage.addEventListener("tick", handleTick)
 function getProjectionMatrix(container, totalDepth) 
 var focalLength = 528.25;
 var projectionCenter = x : lib.properties.width/2, y : lib.properties.height/2 ;
 var scale = (totalDepth + focalLength)/focalLength;
 var scaleMat = new createjs.Matrix2D;
 scaleMat.a = 1/scale;
 scaleMat.d = 1/scale;
 var projMat = new createjs.Matrix2D;
 projMat.tx = -projectionCenter.x;
 projMat.ty = -projectionCenter.y;
 projMat = projMat.prependMatrix(scaleMat);
 projMat.tx += projectionCenter.x;
 projMat.ty += projectionCenter.y;
 return projMat;
 
 function handleTick(event) 
 var cameraInstance = exportRoot.___camera___instance;
 if(cameraInstance !== undefined && cameraInstance.pinToObject !== undefined)
 
 cameraInstance.x = cameraInstance.pinToObject.x + cameraInstance.pinToObject.pinOffsetX;
 cameraInstance.y = cameraInstance.pinToObject.y + cameraInstance.pinToObject.pinOffsetY;
 if(cameraInstance.pinToObject.parent !== undefined && cameraInstance.pinToObject.parent.depth !== undefined)
 cameraInstance.depth = cameraInstance.pinToObject.parent.depth + cameraInstance.pinToObject.pinOffsetZ;
 
 applyLayerZDepth(exportRoot);
 
 function applyLayerZDepth(parent)
 
 var cameraInstance = parent.___camera___instance;
 var focalLength = 528.25;
 var projectionCenter = 'x' : 0, 'y' : 0;
 if(parent === exportRoot)
 
 var stageCenter = 'x' : lib.properties.width/2, 'y' : lib.properties.height/2 ;
 projectionCenter.x = stageCenter.x;
 projectionCenter.y = stageCenter.y;
 
 for(child in parent.children)
 
 var layerObj = parent.children[child];
 if(layerObj == cameraInstance)
 continue;
 applyLayerZDepth(layerObj, cameraInstance);
 if(layerObj.layerDepth === undefined)
 continue;
 if(layerObj.currentFrame != layerObj.parent.currentFrame)
 
 layerObj.gotoAndPlay(layerObj.parent.currentFrame);
 
 var matToApply = new createjs.Matrix2D;
 var cameraMat = new createjs.Matrix2D;
 var totalDepth = layerObj.layerDepth ? layerObj.layerDepth : 0;
 var cameraDepth = 0;
 if(cameraInstance && !layerObj.isAttachedToCamera)
 
 var mat = cameraInstance.getMatrix();
 mat.tx -= projectionCenter.x;
 mat.ty -= projectionCenter.y;
 cameraMat = mat.invert();
 cameraMat.prependTransform(projectionCenter.x, projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
 cameraMat.appendTransform(-projectionCenter.x, -projectionCenter.y, 1, 1, 0, 0, 0, 0, 0);
 if(cameraInstance.depth)
 cameraDepth = cameraInstance.depth;
 
 if(layerObj.depth)
 
 totalDepth = layerObj.depth;
 
 //Offset by camera depth
 totalDepth -= cameraDepth;
 if(totalDepth < -focalLength)
 
 matToApply.a = 0;
 matToApply.d = 0;
 
 else
 
 if(layerObj.layerDepth)
 
 var sizeLockedMat = getProjectionMatrix(parent, layerObj.layerDepth);
 if(sizeLockedMat)
 
 sizeLockedMat.invert();
 matToApply.prependMatrix(sizeLockedMat);
 
 
 matToApply.prependMatrix(cameraMat);
 var projMat = getProjectionMatrix(parent, totalDepth);
 if(projMat)
 
 matToApply.prependMatrix(projMat);
 
 
 layerObj.transformMatrix = matToApply;
 
 
 
 //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() 
 
 makeResponsive(false,'both',false,1); 
 AdobeAn.compositionLoaded(lib.properties.id);
 fnStartAnimation();

function playSound(id, loop) 
 return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

</script>
<!-- write your code here -->
</head>
<body onload="init();">
 <div id="animation_container" style="background-color:rgba(226, 197, 159, 1.00); width:747px; height:420px">
 <canvas id="canvas" width="747" height="420" style="position: absolute; display: block; background-color:rgba(226, 197, 159, 1.00);"></canvas>
 <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:747px; height:420px; position: absolute; left: 0px; top: 0px; display: block;">
 </div>
 </div>
</body>
</html>