title: HTML5 Canvas - How to Draw a line over an image background?
body: <p>I am trying to draw a line on top of an image background - in an HTML5 Canvas .
  However always the line gets drawn behind the image . Actually the line gets drawn first and then the pictures get drawn - irrespective of how I call the functions. </p>
  
  <p>How do I bring the line to the top of the image ? </p>
  
  <pre><code>var canvas = document.getElementById("myCanvas");
          var context = canvas.getContext("2d");
              context.clearRect(0, 0, canvas.width, canvas.height);
  drawbackground(canvas, context); 
  drawlines(canvas, context); 
  
  
  function drawbackground(canvas, context){
  
      var imagePaper = new Image();
  
  
          imagePaper.onload = function(){
  
  
              context.drawImage(imagePaper,100, 20, 500,500);
          };
  
        imagePaper.src = "images/main_timerand3papers.png";
  }
  
  
  
  function drawlines(canvas, context){
  
  
              context.beginPath();
              context.moveTo(188, 130);
              context.bezierCurveTo(140, 10, 388, 10, 388, 170);
              context.lineWidth = 10;
              // line color
              context.strokeStyle = "black";
              context.stroke();
  }
  </code></pre>