title: HTML5 draw text that stays on the top
body: <p>I am creating a file called functions.js with diferent functions like:</p>
  
  <ol>
  <li>bgImage()</li>
  <li>drawImage()</li>
  <li>setText()</li>
  </ol>
  
  <p>My issue is that my text keeps staying behind.</p>
  
  <p>What i want to do is, when i call setText() i can put text where i want.  And the text will be put on the top ofc the convas.  I know i need to call the image draw load functions first to get them to not overwrite my text.  But i did so in my JS.</p>
  
  <p>So its very important that i can call the function setText() as many times as i want, after all images are drawn/set, and the text will be visible.</p>
  
  <p>I want the text on the top.</p>
  
  <p>Here is my code:</p>
  
  <p><strong>functions.js</strong></p>
  
  <pre><code>var canvas = "";
  var context = "";
  
  function canvasInit() {
      canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');
  }
  
  function bgImage() {
      var imageObj = new Image();
      imageObj.onload = function() {
          var pattern = context.createPattern(imageObj, 'repeat');
          context.rect(0, 0, canvas.width, canvas.height);
          context.fillStyle = pattern;
          context.fill();
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
  }
  
  function drawImage() {
      var imageObj = new Image();
      imageObj.onload = function() {
          context.drawImage(imageObj, 10, 50);
          context.drawImage(imageObj, x, y, width, height);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
  }
  
  function    (text) {
      context.font = 'italic 40pt Calibri';
      context.fillText(text, 150, 100);
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="functions.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          document.addEventListener('DOMContentLoaded',ready);
          function ready() {
              canvasInit();
              bgImage();
              drawImage();
              setText("Yo");
              setText("heyyyy");
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="myCanvas" width="500" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>Updated test that do not work:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="functions.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          document.addEventListener('DOMContentLoaded',ready);
          function ready() {
              canvasInit();
              bgImage(function() {
                 setText(); 
              });
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;canvas id="myCanvas" width="500" height="400"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>functions.js</strong></p>
  
  <pre><code>var canvas = "";
  var context = "";
  
  function canvasInit() {
      canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');
  }
  
  function bgImage(callback) { // add parameter for function
  
      var imageObj = new Image();
      imageObj.onload = function() {
          var pattern = context.createPattern(imageObj, 'repeat');
          context.rect(0, 0, canvas.width, canvas.height);
          context.fillStyle = pattern;
          context.fill();
  
          if (typeof callback === 'function')  {
              callback();  // invoke callback function
          }
  
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png';
  
  }
  
  function drawImage() {
      var imageObj = new Image();
      imageObj.onload = function() {
          context.drawImage(imageObj, 10, 50);
          context.drawImage(imageObj, x, y, width, height);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
  }
  
  function setText() {
      context.font = 'italic 40pt Calibri';
      context.fillText("Yoo adfa ds asd a sd", 150, 100);
  }
  </code></pre>