title: Make function wait until element exists
body: <p>I'm trying to add a canvas over another canvas – how can I make this function wait to start until the first canvas is created?</p>
  
  <pre><code>function PaintObject(brush) {
  
      this.started = false;
  
      // get handle of the main canvas, as a DOM object, not as a jQuery Object. Context is unfortunately not yet
      // available in jquery canvas wrapper object.
      var mainCanvas = $("#" + brush).get(0);
  
      // Check if everything is ok
      if (!mainCanvas) {alert("canvas undefined, does not seem to be supported by your browser");}
      if (!mainCanvas.getContext) {alert('Error: canvas.getContext() undefined !');}
  
      // Get the context for drawing in the canvas
      var mainContext = mainCanvas.getContext('2d');
      if (!mainContext) {alert("could not get the context for the main canvas");}
  
      this.getMainCanvas = function () {
          return mainCanvas;
      }
      this.getMainContext = function () {
          return mainContext;
      }
  
      // Prepare a second canvas on top of the previous one, kind of second "layer" that we will use
      // in order to draw elastic objects like a line, a rectangle or an ellipse we adjust using the mouse
      // and that follows mouse movements
      var frontCanvas = document.createElement('canvas');
      frontCanvas.id = 'canvasFront';
      // Add the temporary canvas as a second child of the mainCanvas parent.
      mainCanvas.parentNode.appendChild(frontCanvas);
  
      if (!frontCanvas) {
          alert("frontCanvas null");
      }
      if (!frontCanvas.getContext) {
          alert('Error: no frontCanvas.getContext!');
      }
      var frontContext = frontCanvas.getContext('2d');
      if (!frontContext) {
          alert("no TempContext null");
      }
  
      this.getFrontCanvas = function () {
          return frontCanvas;
      }
      this.getFrontContext = function () {
          return frontContext;
      }
  </code></pre>