title: Can you load an img tag's src inside javascript file and then draw it to the canvas?
body: <p>index.html</p>
  
  <pre><code>&lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=8" /&gt;
      &lt;title&gt;DCView&lt;/title&gt;
  
      &lt;script type="text/javascript" src="dcview.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="float:center; text-align:center;"&gt;
          &lt;canvas id="dcviewCanvas" width="1024" height="1024"/&gt;
          &lt;img id="bgImage" src="" hidden="true"/&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>dcview.js</p>
  
  <pre><code>var backgroundImage,
      backgroundImageSrc,
      canvas,
      context;
  
  window.onload = function()
  {
      //Initially set the background image source to DCView.png
      backgroundImageSrc = "Foundation\\WebService\\Downloads\\DCView.png";
  
      //Load the background image with the given source
      loadBackgroundImage(backgroundImageSrc);
  }
  
  function loadBackgroundImage(imageSrc)
  {
      canvas = document.getElementById("dcviewCanvas");
      context = canvas.getContext("2d");
  
      backgroundImage = document.getElementById("bgImage");
      backgroundImage.src = imageSrc;
  
      context.drawImage(backgroundImage, 0, 0);
  }
  </code></pre>
  
  <p>When I try to load index.html in chrome it doesn't load the background image. But when I hard-code the src of the img tag in to that path, it proceeds to load it in.</p>
  
  <p>The only error chrome gives me is:</p>
  
  <blockquote>
    <p>Uncaught SyntaxError: Unexpected token .</p>
  </blockquote>
  
  <p>It points this error to line 47 in dcview.js.</p>
  
  <p>Is the way I am going about this completely wrong? I am a beginner with HTML and Javascript.</p>
  
  <p>Thanks,</p>
  
  <p>Virat</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>dcview.js</p>
  
  <pre><code>window.onload = function()
  {
      //Initially set the background image source to DCView.png
      backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
  
      //Load the background image which is initially set to DCView.png
      loadBackgroundImage(backgroundImageSrc);
  
      //Load the other various pin images;
      loadPinImages();
  }
  
  function loadBackgroundImage(imageSrc)
  {
      context = document.getElementById('dcviewCanvas').getContext('2d');
  
      backgroundImage = new Image();
      backgroundImage.src = imageSrc;
  
      backgroundImage.onload = function(){
          context.drawImage(backgroundImage, 0, 0);
      };
  }
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <p>Once I have loaded the background image, other images I draw on top are being drawn underneath the background image. Ideas?</p>
  
  <pre><code>window.onload = function()
  {
      //Initially set the background image source to DCView.png
      backgroundImageSrc = 'Foundation/WebService/Downloads/Layout_Basement.png';
  
      //Load the background image which is initially set to DCView.png
      loadBackgroundImage(backgroundImageSrc);
  
      canvas = document.getElementById('dcviewCanvas');
      context = canvas.getContext('2d');
      context.drawImage(sortationLanePinBlue, 0, 0);
  }
  </code></pre>