title: How to add image to canvas
body: <p>I'm experimenting a bit with the new canvas element in HTML.</p>
  
  <p>I simply want to add an image to the canvas but it doesn't work for some reason.</p>
  
  <p>I have the following code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;canvas id="viewport"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>canvas#viewport { border: 1px solid white; width: 900px; }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var canvas = document.getElementById('viewport'),
  context = canvas.getContext('2d');
  
  make_base();
  
  function make_base()
  {
    base_image = new Image();
    base_image.src = 'img/base.png';
    context.drawImage(base_image, 100, 100);
  }
  </code></pre>
  
  <p>The image exists and I get no JavaScript errors. The image just doesn't display.</p>
  
  <p>It must be something really simple I've missed...</p>