title: Webpage displays differently when viewed in a browser from the local machine than when viewed in a browser from the server
body: <p>I have the following web page, which when I view in a browser from my local computer, displays exactly as I intended it to. However, after copying that page to my filestore on the server (along with all of the supporting files it requires), and viewing it from the server by browsing to the URL at which it's located, I find that it is not displayed in the same way as when viewing it from my local computer.</p>
  
  <p>The page I have is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
    body {
      margin: 0px;
      padding: 0px;
    }
    canvas{
      border: 1px solid #9C9898;
      background:#F5F5F5;
    }
  &lt;/style&gt;
  &lt;div id="container"&gt;&lt;/div&gt;
  &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.1.2.js"&gt;&lt;/script&gt;
  &lt;script src="drawDescriptionBoxes.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  /*Add the game elements' global variables */
  var currentLevel = 1;
  var totalLevels = 3;
  var currentScore = 0;
  var currentScorePositionX = 950;
  var currentScorePositionY = 10;
  
  /*Add code to draw images to random locations here */
      var imageX = Math.floor(Math.random()*950);
      var imageY = Math.floor(Math.random()*450);
  
      var stage = new Kinetic.Stage({
        container: "container",
        width: 1000,
        height: 500
      });
      var imagesLayer = new Kinetic.Layer();
      var canvas = imagesLayer.getCanvas();
      var context = canvas.getContext("2d");
      console.log("Foo ");
  
  function loadImages(sources, callback){
      var imagesDir = "";
      var images = {};
      var loadedImages = 0;
      var numImages = 0;
  
      //console.log("length " + sources.length);
      for (var src in sources){
          numImages++;
      }
      //console.log("Num Images " + numImages);
  
      var index=0;
      console.log("length " + sources.length);
      for (index=0;index &lt; numImages ;index++){
          console.log(index);
          images[index] = new Image();
          images[index].src = sources[index];
          console.log("Adding " + sources[index]);
          callback(images[index]);
          console.log("images array length = " + images.length);
      }
  
      stage.add(imagesLayer); // should only be added once!!
      }
  
      function isNearDescriptionBox(itemImage, descriptionBox){
          var ii = itemImage;
          var db = descriptionBox;
          if(ii.attrs.x &gt; db.x - 20 &amp;&amp; ii.attrs.x &lt; db.x + 20 &amp;&amp; ii.attrs.y &gt; db.y - 20 &amp;&amp; ii.attrs.y &lt; db.y +20){
              return true;
          }else{
              return false;
          }
      }
  
      /* This function draws the game elements */
      function drawGameElements(){
          /* Draw a line for the 'score bar'. */
          context.moveTo(0, 25);
              context.lineTo(1000, 25);
          context.stroke();
  
          /* Draw current level/ total levels on the left, and current score on the right. */
          context.font = "11pt Calibri"; /* Text font &amp; size */
          context.strokeStyle = "black"; /* Font colour */
          context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
          context.strokeText(currentScore, 750, 15);
      }
  
      function initStage(images){
          var stage = new Kinetic.Stage({
              container: "container",
              width: 1000,
              height: 500
          });
          var descriptionLayer = new Kinetic.Layer();
          //var imagesLayer = new Kinetic.Layer();
          var allImages = [];
          var currentScore = 0;
  
  
  
  
          /*Draw the description boxes */
  
      }
  
    function drawImage(imageObj) {
      //var layer = new Kinetic.Layer();
  
      var canvasImage = new Kinetic.Image({
        image: imageObj,
        width: 50,
        height: 50,
            // puts the image in teh middle of the canvas
            x: stage.getWidth() / 2 - 50 / 2,
        y: stage.getHeight() / 2 - 50 / 2,
        draggable: true
      });
  
      // add cursor styling
      canvasImage.on('mouseover', function() {
        document.body.style.cursor = 'pointer';
      });
      canvasImage.on('mouseout', function() {
        document.body.style.cursor = 'default';
      });
  
      imagesLayer.add(canvasImage);
    }
  
      /*This code loads the images to the canvas when the browser window loads */
      window.onload = function(){
          var sources = {};
              sources[0] = document.getElementById("building").src,
              sources[1] = document.getElementById("chair").src,
              sources[2] = document.getElementById("drink").src,
              sources[3] = document.getElementById("food").src,
              sources[4] = document.getElementById("fridge").src,
              sources[5] = document.getElementById("land").src,
              sources[6] = document.getElementById("money").src,
              sources[7] = document.getElementById("oven").src,
              sources[8] = document.getElementById("table").src,
              sources[9] = document.getElementById("van").src,
  
              sources[10] = document.getElementById("burger").src,
              sources[11] = document.getElementById("chips").src,
              sources[12] = document.getElementById("drink").src,
              sources[13] = document.getElementById("franchiseFee").src,
              sources[14] = document.getElementById("wages").src,
  
              sources[15] = document.getElementById("admin").src,
              sources[16] = document.getElementById("cleaners").src,
              sources[17] = document.getElementById("electricity").src,
              sources[18] = document.getElementById("insurance").src,
              sources[19] = document.getElementById("manager").src,
              sources[20] = document.getElementById("rates").src,
              sources[21] = document.getElementById("training").src,
              sources[22] = document.getElementById("water").src,
  
              sources[23] = document.getElementById("burger").src,
              sources[24] = document.getElementById("chips").src,
              sources[25] = document.getElementById("drink").src,
  
              sources[26] = document.getElementById("creditors").src,
              sources[27] = document.getElementById("electricity").src,
              sources[28] = document.getElementById("food").src,
              sources[29] = document.getElementById("hirePurchase").src,
              sources[30] = document.getElementById("loan").src,
              sources[31] = document.getElementById("overdraft").src,
              sources[32] = document.getElementById("payeTax").src,
              sources[33] = document.getElementById("tax").src
  
          loadImages(sources, drawImage);
          drawGameElements();
          drawDescriptionBoxes();
      };
  
  
      &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;section hidden&gt;
  &lt;img id="startButton" src="images/startButton.png" alt="Start Button" width="179" height="180" href="javascript:drawLevelOneElements();"/&gt;
  &lt;img id="box" src="images/box.png" alt="box.png" alt="Description Box" width="100" height="50" /&gt;
  
  &lt;img id="building" src="images/assets/building.png" alt="Asset" /&gt;
  &lt;img id="chair" src="images/assets/chair.gif" alt="Asset" /&gt;
  &lt;img id="drink" src="images/assets/drink.jpg" alt="Asset" /&gt;
  &lt;img id="food" src = "images/assets/food.gif" alt="Asset"/&gt;
  &lt;img id="fridge" src = "images/assets/fridge.png" alt="Asset"/&gt;
  &lt;img id="land" src = "images/assets/land.jpg" alt="Asset"/&gt;
  &lt;img id="money" src = "images/assets/money.jpg" alt="Asset"/&gt;
  &lt;img id="oven" src = "images/assets/oven.jpg" alt="Asset"/&gt;
  &lt;img id="table" src = "images/assets/table.gif" alt="Asset"/&gt;
  &lt;img id="van" src = "images/assets/van.jpg" alt="Asset"/&gt;
  
  &lt;img id="burger" src = "images/expenses/direct/burger.png" alt="Direct Expense"/&gt;
  &lt;img id="chips" src = "images/expenses/direct/chips.png" alt="Direct Expense"/&gt;
  &lt;img id="drink" src = "images/expenses/direct/drink.jpg" alt="Direct Expense"/&gt;
  &lt;img id="franchiseFee" src = "images/expenses/direct/franchiseFee.jpg" alt="Direct Expense"/&gt;
  &lt;img id="wages" src = "images/expenses/direct/wages.jpg" alt="Direct Expense"/&gt;
  
  &lt;img id="admin" src = "images/expenses/indirect/admin.jpg" alt="Indirect Expense"/&gt;
  &lt;img id="cleaners" src = "images/expenses/indirect/cleaners.gif" alt="Indirect Expense"/&gt;
  &lt;img id="electricity" src = "images/expenses/indirect/electricity.gif" alt="Indirect Expense"/&gt;
  &lt;img id="insurance" src = "images/expenses/indirect/insurance.jpg" alt="Indirect Expense"/&gt;
  &lt;img id="manager" src = "images/expenses/indirect/manager.jpg" alt="Indirect Expense"/&gt;
  &lt;img id="rates" src = "images/expenses/indirect/rates.jpg" alt="Indirect Expense"/&gt;
  &lt;img id="training" src = "images/expenses/indirect/training.gif" alt="Indirect Expense"/&gt;
  &lt;img id="water" src = "images/expenses/indirect/water.gif" alt="Indirect Expense"/&gt;
  
  &lt;img id="burger" src = "images/income/burger.png" alt="Income"/&gt;
  &lt;img id="chips" src = "images/income/chips.png" alt="Income"/&gt;
  &lt;img id="drink" src = "images/income/drink.jpg" alt="Income"/&gt;
  
  &lt;img id="creditors" src = "images/liabilities/creditors.gif" alt="Liability"/&gt;
  &lt;img id="electricity" src = "images/liabilities/electricity.png" alt="Liability"/&gt;
  &lt;img id="food" src = "images/liabilities/food.jpg" alt="Liability"/&gt;
  &lt;img id="hirePurchase" src = "images/liabilities/hirePurchase.jpg" alt="Liability"/&gt;
  &lt;img id="loan" src = "images/liabilities/loan.png" alt="Liability"/&gt;
  &lt;img id="overdraft" src = "images/liabilities/overdraft.jpg" alt="Liability"/&gt;
  &lt;img id="payeTax" src = "images/liabilities/payeTax.jpg" alt="Liability"/&gt;
  &lt;img id="tax" src = "images/liabilities/tax.jpg" alt="Liability"/&gt;
  
  
  &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I view it locally, it displays a canvas, with four 'description boxes' which have been drawn by the following function that's called from the JavaScript on the page (although the function itself is actually in a separate JS file):</p>
  
  <pre><code>CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
          if(typeof stroke == "undefined" ){
              stroke = true;
          }
          if(typeof radius === "undefined"){
              radius = 5;
          }
          this.beginPath();
          this.moveTo(x + radius, y);
          this.lineTo(x + width - radius, y);
          this.quadraticCurveTo(x + width, y, x + width, y + radius);
          this.lineTo(x + width, y + height - radius);
          this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
          this.lineTo(x + radius, y + height);
          this.quadraticCurveTo(x, y + height, x, y + height - radius);
          this.lineTo(x, y + radius);
          this.quadraticCurveTo(x, y, x + radius, y);
          this.closePath();
          if(stroke){
              context.stroke();
          }
      }
  
      context.drawDescriptionArea(70, 400, 120, 70);
      context.font = '25pt Calibri';
      context.strokeText('Asset', 90, 440);
  
      context.drawDescriptionArea(300, 400, 120, 70);
      context.strokeText('Liability', 310, 440);
  
      context.drawDescriptionArea(540, 400, 120, 70);
      context.strokeText('Income', 550, 440);
  
      context.drawDescriptionArea(750, 400, 180, 70);
      context.strokeText('Expenditure', 760, 440);
  </code></pre>
  
  <p>However, when I view it from the server using the URL at which it's located, for some reason, the description boxes are not displayed on the canvas, and I don't understand why, since I have copied everything over from my local machine to the server, so it should all be there.</p>
  
  <p>Anyone have any ideas?</p>