title: Image Not Loading on Canvas
body: <p>My issue is that I am having problems loading locally hosted images on to the canvas. I have tried hosting the code on a web server, using XAMPP, and locally, and the LightBlue.jpg image never seems to load. However, when I use an external image from a website the code works perfectly. I have provided an example below.</p>
  
  <p>HTML:
  </p>
  
  <pre><code>&lt;canvas id="Section1Canvas" width="500" height="95" style="border:1px solid #d3d3d3;"&gt;Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  </code></pre>
  
  <p>JAVASCRIPT:<br>
  </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      var canvas = document.getElementById('Section1Canvas'),
      context = canvas.getContext('2d');
      make_base();
      function make_base()
      {
          base_image = new Image();
          base_image.onload = function()
          {
              context.drawImage(base_image, 10, 10);
          }
          base_image.src = 'images\Selection\Bag\Section1\LightBlue.jpg';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>The script appears just above the closing HTML tag within my code. I have hosted all of the information my webserver and the image still refuses to load.If I were to change the code to the following using a external image the canvas loads the image perfectly: </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;script&gt;
      var canvas = document.getElementById('Section1Canvas'),
      context = canvas.getContext('2d');
      make_base();
      function make_base()
      {
          base_image = new Image();
          base_image.onload = function()
          {
              context.drawImage(base_image, 10, 10);
          }
          base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any guidance would be greatly appreciated. </p>