title: Loading an image onto a canvas with javaScript
body: <p>I am currently testing using the <code>&lt;canvas&gt;</code> element to draw all of the backgrounds (I will add effects later to these images later and is the reason I'm not using CSS to load the images). That said, I'm currently having difficulty loading a image on to the canvas. Here is the code:</p>
  <pre><code>&lt;html&gt;    
  &lt;head&gt;    
      &lt;title&gt;Canvas image testing&lt;/title&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          function Test1() {
              var ctx = document.getElementById('canvas');
              if (canvas.getContext) {
                  var ctx = canvas.getContext('2d');
                  //Loading of the home test image - img1
                  var img1 = new Image();
                  img1.src = 'img/Home.jpg';
                  //drawing of the test image - img1
                  img1.onload = function () {
                      //draw background image
                      ctx.drawimage(img1, 0, 0);
                      //draw a box over the top
                      ctx.fillStyle = &quot;rgba(200, 0, 0, 0.5)&quot;;
                      ctx.fillRect(0, 0, 500, 500);
                  };
              }                
          }
      &lt;/script&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          canvas { border: 2px solid black; width: 100%; height: 98%; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;Test1();&quot;&gt;    
      &lt;canvas id=&quot;canvas&quot; width=&quot;1280&quot; height=&quot;720&quot;&gt;&lt;/canvas&gt;      
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I think that I'm not loading the image correctly, but I'm not sure.</p>