title: HTML5 Canvas JS publishing problems. Won't work on server
body: <p>I've just made some experiments on making a website and posting it, using Flash ~ Adobe Flash Professional СС 2014 with HTML5 Canvas embedded.</p>
  
  <p>So at first I made 3-pager web-site alike .FLA project and posted it locally. And everything worked fine. Thus I was using cyrrilic names of images used for script - but faced no problems locally on InternetExplorer. But Opera Browser says easeljs-0.7.1.min.js:13 Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images. Ok it cant reach images, no problem.</p>
  
  <p>Further I uploaded my code to free hosting, thus it shouldnt be a problem also - that it's free.</p>
  
  <p>So after publishing i got HTML :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;AITS&lt;/title&gt;
  
  &lt;script src="http://code.createjs.com/easeljs-0.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.createjs.com/tweenjs-0.5.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.createjs.com/movieclip-0.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.createjs.com/preloadjs-0.4.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="AITS.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  var canvas, stage, exportRoot;
  
  function init() {
      canvas = document.getElementById("canvas");
      images = images||{};
  
      var loader = new createjs.LoadQueue(false);
      loader.addEventListener("fileload", handleFileLoad);
      loader.addEventListener("complete", handleComplete);
      loader.loadManifest(lib.properties.manifest);
  }
  
  function handleFileLoad(evt) {
      if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
  }
  
  function handleComplete() {
      exportRoot = new lib.AITS();
  
      stage = new createjs.Stage(canvas);
      stage.addChild(exportRoot);
      stage.update();
      stage.enableMouseOver();
  
      createjs.Ticker.setFPS(lib.properties.fps);
      createjs.Ticker.addEventListener("tick", stage);
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="init();" style="background-color:#D4D4D4"&gt;
      &lt;canvas id="canvas" width="1366" height="768" style="background-color:#15424D"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And JavaScript File</p>
  
  <pre><code>(function (lib, img, cjs) {
  
  var p; // shortcut to reference prototypes
  
  // library properties:
  lib.properties = {
      width: 1366,
      height: 768,
      fps: 24,
      color: "#15424D",
      manifest: [
          {src:"images/img1.png", id:"img1"},
          {src:"images/img2.png", id:"img2"},
          {src:"images/img3.png", id:"img3"},
          {src:"images/img4.png", id:"img4"},
          {src:"images/img5.png", id:"img5"},
          {src:"images/img6.png", id:"img6"}
      ]
  };
  
  
  
  // symbols:
  
  
  
  (lib.img1 = function() {
      this.initialize(img.img1);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,777,350);
  
  
  (lib.img2 = function() {
      this.initialize(img.img2);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,823,681);
  
  
  (lib.img3 = function() {
      this.initialize(img.img3);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,438,326);
  
  
  (lib.img4 = function() {
      this.initialize(img.img4);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,256,256);
  
  
  (lib.img5 = function() {
      this.initialize(img.img5);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,1080,500);
  
  
  (lib.img6 = function() {
      this.initialize(img.img6);
  }).prototype = p = new cjs.Bitmap();
  p.nominalBounds = new cjs.Rectangle(0,0,651,589);
  
  
  (lib.Info_but = function(mode,startPosition,loop) {
      this.initialize(mode,startPosition,loop,{});
  
      // РЎР»РѕР№ 2
      this.text = new cjs.Text("INFO", "96px 'Georgia'", "#CC6600");
      this.text.textAlign = "center";
      this.text.lineHeight = 98;
      this.text.lineWidth = 408;
      this.text.setTransform(288.4,-91.4,1.463,1.463);
  
      this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
  
      // РЎР»РѕР№ 1
      this.instance = new lib.img4();
      this.instance.setTransform(-128,-128);
  
      this.shape = new cjs.Shape();
      this.shape.graphics.f().s("#000000").ss(1,1,1).p("EguggTwMBdBAAAMAAAAnhMhdBAAAg");
      this.shape.setTransform(182.9,-0.1);
  
      this.shape_1 = new cjs.Shape();
      this.shape_1.graphics.f("rgba(255,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
      this.shape_1.setTransform(182.9,-0.1);
  
      this.shape_2 = new cjs.Shape();
      this.shape_2.graphics.f("rgba(102,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
      this.shape_2.setTransform(182.9,-0.1);
  
      this.shape_3 = new cjs.Shape();
      this.shape_3.graphics.f("rgba(255,255,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
      this.shape_3.setTransform(182.9,-0.1);
  
      this.shape_4 = new cjs.Shape();
      this.shape_4.graphics.f("rgba(204,0,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
      this.shape_4.setTransform(182.9,-0.1);
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
  
  }).prototype = p = new cjs.MovieClip();
  p.nominalBounds = new cjs.Rectangle(-128,-128,720.6,256);
  
  
  (lib.house = function() {
      this.initialize();
  
      // РЎР»РѕР№ 1
      this.instance = new lib.img3();
      this.instance.setTransform(-138.7,-79,0.634,0.485);
  
      this.addChild(this.instance);
  }).prototype = p = new cjs.Container();
  p.nominalBounds = new cjs.Rectangle(-138.7,-79,277.5,158);
  
  
  (lib.BUTTON_CITY = function() {
      this.initialize();
  
      // РЎР»РѕР№ 1
      this.shape = new cjs.Shape();
      this.shape.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
  
      this.addChild(this.shape);
  }).prototype = p = new cjs.Container();
  p.nominalBounds = new cjs.Rectangle(-158,-71.9,316.1,143.9);
  
  
  (lib.Photo_but = function(mode,startPosition,loop) {
      this.initialize(mode,startPosition,loop,{});
  
      // РЎР»РѕР№ 2
      this.text = new cjs.Text("PHOTOS", "61px 'Georgia'", "#FFFF66");
      this.text.textAlign = "center";
      this.text.lineHeight = 63;
      this.text.lineWidth = 290;
      this.text.setTransform(610.1,-61.8);
  
      this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
  
      // РЎР»РѕР№ 1
      this.shape = new cjs.Shape();
      this.shape.graphics.f().s("#000000").ss(1,1,1).p("A4rrOMAxXAAAIAAWdMgxXAAAg");
      this.shape.setTransform(615.4,-24.8);
  
      this.shape_1 = new cjs.Shape();
      this.shape_1.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
      this.shape_1.setTransform(615.4,-24.8);
  
      this.shape_2 = new cjs.Shape();
      this.shape_2.graphics.f().s("#000000").ss(1,1,1).p("AMlrOIMHAAIAAWdI4sAAI4rAAIAA2dINcAAIX0AAIMHWdAAALPIMl2dArPrOILPWdA4rLPINc2d");
      this.shape_2.setTransform(615.4,-24.8);
  
      this.shape_3 = new cjs.Shape();
      this.shape_3.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("AYsLPIsH2dIMHAAIAAWdgAAALPIMl2dIMHWdgAAALPIrP2dIX0AAIslWdgA4rLPINc2dItcWdIAA2dINcAAILPWdg");
      this.shape_3.setTransform(615.4,-24.8);
  
      this.instance = new lib.BUTTON_CITY();
      this.instance.setTransform(615.4,-24.8);
      this.instance.filters = [new cjs.ColorFilter(0.61, 0.61, 0.61, 1, 0, 0, 0, 0)];
      this.instance.cache(-160,-74,320,148);
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_3},{t:this.shape_2}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).wait(1));
  
  }).prototype = p = new cjs.MovieClip();
  p.nominalBounds = new cjs.Rectangle(456.3,-97.7,318.1,145.9);
  
  
  (lib.BOOKING_BUT = function(mode,startPosition,loop) {
      this.initialize(mode,startPosition,loop,{});
  
      // РЎР»РѕР№ 2
      this.text = new cjs.Text("BOOKING", "67px 'Georgia'", "#CC6600");
      this.text.textAlign = "center";
      this.text.lineHeight = 69;
      this.text.lineWidth = 416;
      this.text.setTransform(-0.7,-48.2);
  
      this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
  
      // РЎР»РѕР№ 1
      this.instance = new lib.house();
      this.instance.setTransform(3.9,-0.6);
      this.instance.filters = [new cjs.ColorFilter(0.44, 0.44, 0.44, 1, 142.8, 142.8, 142.8, 0)];
      this.instance.cache(-141,-81,282,162);
      new cjs.ButtonHelper(this.instance, 0, 1, 1);
  
      this.shape = new cjs.Shape();
      this.shape.graphics.f().s("#000000").ss(1,1,1).p("A7VsvMA2rAAAIAAZfMg2rAAAg");
  
      this.shape_1 = new cjs.Shape();
      this.shape_1.graphics.f("rgba(231,225,219,0.427)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
  
      this.shape_2 = new cjs.Shape();
      this.shape_2.graphics.f("rgba(142,185,206,0.757)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
  
      this.shape_3 = new cjs.Shape();
      this.shape_3.graphics.f("rgba(255,255,51,0.529)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
  
      this.shape_4 = new cjs.Shape();
      this.shape_4.graphics.f("rgba(255,102,153,0.42)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
  
  }).prototype = p = new cjs.MovieClip();
  p.nominalBounds = new cjs.Rectangle(-208.8,-82.6,420.3,235.9);
  
  
  // stage content:
  (lib.AITS = function(mode,startPosition,loop) {
      this.initialize(mode,startPosition,loop,{});
  
      // timeline functions:
      this.frame_0 = function() {
          this.stop();
  
          this.btn1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame4.bind(this));
  
          this.btn2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame3.bind(this));
  
          this.btn3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame2.bind(this));
  
  
          function fl_ClickToGoToAndPlayFromFrame2()
          {
              this.gotoAndStop(1);
          }
          function fl_ClickToGoToAndPlayFromFrame3()
          {
              this.gotoAndStop(2);
          }
          function fl_ClickToGoToAndPlayFromFrame4()
          {
              this.gotoAndStop(3);
          }
      }
  
      // actions tween:
      this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(4));
  
      // РЎР»РѕР№ 4
      this.instance = new lib.img2();
      this.instance.setTransform(149.7,137.6,0.745,0.745);
  
      this.instance_1 = new lib.img6();
      this.instance_1.setTransform(177.9,135.2,0.857,0.857);
  
      this.text = new cjs.Text("Email: 7675575@mail.ru", "96px 'Georgia'", "#FFFFFF");
      this.text.textAlign = "center";
      this.text.lineHeight = 98;
      this.text.setTransform(343.2,417.2,0.588,0.591);
      this.text.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
  
      this.text_1 = new cjs.Text("Viber/WhatsApp : +79167675575", "96px 'Georgia'", "#FFFFFF");
      this.text_1.textAlign = "center";
      this.text_1.lineHeight = 98;
      this.text_1.setTransform(447.5,304.3,0.588,0.591);
      this.text_1.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance}]},1).to({state:[{t:this.instance_1}]},1).to({state:[{t:this.text_1},{t:this.text}]},1).wait(1));
  
      // BUTTONS
      this.btn1 = new lib.BOOKING_BUT();
      this.btn1.setTransform(673,529.8);
      new cjs.ButtonHelper(this.btn1, 0, 1, 2, false, new lib.BOOKING_BUT(), 3);
  
      this.btn3 = new lib.Info_but();
      this.btn3.setTransform(214.3,286.9,0.584,0.633,0,0,0,0.5,-1.3);
      new cjs.ButtonHelper(this.btn3, 0, 1, 2, false, new lib.Info_but(), 3);
  
      this.btn2 = new lib.Photo_but();
      this.btn2.setTransform(553.9,368.7,1.107,1.107,0,0,0,158.8,47.1);
      new cjs.ButtonHelper(this.btn2, 0, 1, 2, false, new lib.Photo_but(), 3);
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.btn2,p:{x:553.9,y:368.7}},{t:this.btn3,p:{x:214.3,y:286.9}},{t:this.btn1,p:{x:673,y:529.8}}]}).to({state:[{t:this.btn2,p:{x:582.1,y:460.9}},{t:this.btn3,p:{x:979.4,y:198.2}},{t:this.btn1,p:{x:1087.3,y:565.7}}]},1).wait(3));
  
      // РЎР»РѕР№ 5
      this.shape = new cjs.Shape();
      this.shape.graphics.f("rgba(7,7,7,0.408)").s().p("EhqtAxaMAAAhizMDVbAAAMAAABizg");
      this.shape.setTransform(683,401.6);
      this.shape._off = true;
  
      this.timeline.addTween(cjs.Tween.get(this.shape).wait(1).to({_off:false},0).wait(3));
  
      // BG
      this.text_2 = new cjs.Text("COPYRIGHT В© 2018  AITS , Montenegro, Budva, Lazi ", "16px 'Bernard MT Condensed'", "#FFFFFF");
      this.text_2.textAlign = "center";
      this.text_2.lineHeight = 18;
      this.text_2.setTransform(681,725.6);
      this.text_2.shadow = new cjs.Shadow("rgba(255,255,102,1)",0,0,1);
  
      this.text_3 = new cjs.Text("AITS BUDVA RENTALS", "96px 'Bernard MT Condensed'", "#FFFFFF");
      this.text_3.textAlign = "center";
      this.text_3.lineHeight = 98;
      this.text_3.setTransform(681,0);
      this.text_3.shadow = new cjs.Shadow("rgba(255,255,153,1)",0,0,21);
  
      this.instance_2 = new lib.img5();
      this.instance_2.setTransform(0,85.4,1.265,1.265);
  
      this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]},1).wait(3));
  
  }).prototype = p = new cjs.MovieClip();
  p.nominalBounds = new cjs.Rectangle(671,372,1398,765);
  
  })(lib = lib||{}, images = images||{}, createjs = createjs||{});
  var lib, images, createjs;
  </code></pre>
  
  <p>I assumed problem could appear with links - and i made them direct like </p>
  
  <pre><code>&lt;script src="http://aits.do.am/AITS.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>For HTML file, made direct links in JS file to the images.
  But the $@#% won't work any way.</p>
  
  <p><b>I got this error - like it remained old cyrrilic names...and script cant load them</b></p>
  
  <pre><code>%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B52.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  %D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  %D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B58.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  %D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B59.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  %D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B513.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  %D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55_1.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
  easeljs.min.js:12 Uncaught TypeError: Cannot read property 'naturalWidth' of undefined
      at c.Fill.b.bitmap (easeljs.min.js:12)
      at a.b.beginBitmapFill (easeljs.min.js:12)
      at new lib.Photo_but (AITS.js:147)
      at new lib.AITS (AITS.js:271)
      at handleComplete (AITS.html:31)
      at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
      at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
      at LoadQueue.a.dispatchEvent (preloadjs.min.js:12)
      at LoadQueue.a._sendComplete (preloadjs.min.js:12)
      at LoadQueue.a._loadNext (preloadjs.min.js:13)
  </code></pre>
  
  <p>Whilts I change my load of images block to</p>
  
  <pre><code>lib.properties = {
      width: 1366,
      height: 768,
      fps: 24,
      color: "#15424D",
      manifest: [
          {src:"http://aits.do.am/images/img1.png", id:"img1"},
          {src:"http://aits.do.am/images/img2.png", id:"img2"},
          {src:"http://aits.do.am/images/img3.png", id:"img3"},
          {src:"http://aits.do.am/images/img4.png", id:"img4"},
          {src:"http://aits.do.am/images/img5.png", id:"img5"},
          {src:"http://aits.do.am/images/img6.png", id:"img6"}
      ]
  };
  </code></pre>
  
  <p><b>Second large is naturalWidth' of undefined problem</b></p>
  
  <p>And mb some could help - I made an animation using embedded play and stop function and now got error when loading such an a animation:</p>
  
  <pre><code>CANVAStry.js:98 Uncaught ReferenceError: fl_ClickToGoToAndStopAtFrame is not defined
      at lib.CANVAStry.frame_0 (CANVAStry.js:98)
      at a.b._runActions (tweenjs-0.5.1.min.js:17)
      at a.b.setPosition (tweenjs-0.5.1.min.js:17)
      at a.b.setPosition (tweenjs-0.5.1.min.js:17)
      at lib.CANVAStry.b._updateTimeline (movieclip-0.7.1.min.js:12)
      at lib.CANVAStry.b._tick (movieclip-0.7.1.min.js:12)
      at a.b._tick (easeljs-0.7.1.min.js:13)
      at a.b.update (easeljs-0.7.1.min.js:13)
      at init (CANVAStry.html:21)
      at onload (CANVAStry.html:29)
  </code></pre>
  
  <p><b>!!!Thanks a lot for any help!!!</b></p>