title: How to draw a background image on an HTML5 canvas
body: <p>I'm working on my first HTML5 Canvas game. I am trying to put in a background image, and I don't know how to do it. The game will change backgrounds throughout levels, but I think I understand how to make that happen. However, if I just try to draw an image, then it appears above my title text. Any ideas how to fix this? I don't think the CSS method will work, because the background will change. Here is my code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;How Well Do You Know Your Swedish?&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas width="640" height="480" id="game" style="display: block; margin-left: auto;         margin-right: auto; border: 1px solid black;" Your Browser is not compatible with this game. We recommend Google Chrome, Mozilla Firefox, or Opera.&gt;&lt;/canvas&gt;
    &lt;script&gt;
      var game_canvas = document.getElementById("game");
      var game_context = game_canvas.getContext("2d");
      var swedishflagbg = new Image();
      swedishflagbg.src = "resources/images/swedishflagbg.png";
      swedishflagbg.onload = function() {
        game_context.drawImage(swedishflagbg, 0, 0);
      }
      game_context.fillStyle = "#000000";
      game_context.font = "35px Ubuntu";
      game_context.textAlign = "center";
      game_context.textBaseline = "top";
      game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I am new to JavaScript, and even newer to the HTML5 Canvas.</p>