title: Javascript call function after another function executes
body: <p>Below are my three functions. I am calling function 1 &amp; 2 in 3 but I am getting an error. My text is not showing inside my canvas. Only the image is getting displayed. How can I make the functions delay the text function until <code>make_base</code> finishes loading.</p>
  
  <p><strong>Function 1</strong></p>
  
  <pre><code>function make_base(img) {
      base_image = new Image();
      base_image.src = img;
      base_image.onload = function(){
          context.drawImage(base_image, 0, 0);
      }
  
  }
  </code></pre>
  
  <p><strong>Function 2</strong></p>
  
  <pre><code>function text(text) {
      context.fillText(text, 50, 50)
  }
  </code></pre>
  
  <p><strong>Function 3</strong></p>
  
  <pre><code>function render() {
      make_base(xxx)
      text(xxx)
  }
  </code></pre>
  
  <p>I have used setTimeout doesnt work because sometimes make_base takes little time to load.</p>