title: HTML5 Canvas - How to draw rectangle over image in canvas
body: <p>Actually, I am able to do it using <code>img.onload</code> function. Something I got from '<a href="https://stackoverflow.com/questions/10623678/html5-canvas-how-to-draw-a-line-over-an-image-background">HTML5 Canvas - How to Draw a line over an image background?</a>'. But I need to draw image without using <code>img</code> from <code>onload</code> function which is like this:</p>
  
  <pre><code>    var imagePaper = new Image();
  
  
          imagePaper.onload = function(){
  
  
              context.drawImage(imagePaper,100, 20, 500,500);
          };
  
        imagePaper.src = "images/main_timerand3papers.png";
  }
  </code></pre>
  
  <p>But I want to able draw rectangle over canvas simply attaching img src above canvas, just as:</p>
  
  <pre><code>&lt;body&gt;  
  &lt;img id="scream" src="my.jpg" alt="The Scream" width="220" height="277"&gt;
  
  &lt;p&gt;Canvas:&lt;/p&gt;
  &lt;canvas id="myCanvas" width="500" height="500" &gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
  </code></pre>
  
  <p>But I'm unable to draw line over img in canvas, either img is drawing or shape is hiding behind. This is my full code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;  
   &lt;head&gt;  
   &lt;title&gt;Playing YouTube video on HTML5 canvas&lt;/title&gt;  
   &lt;meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" /&gt;  
   &lt;style type="text/css"&gt;  
  body {
          margin: 0px;
          padding: 0px;
        } 
   &lt;/style&gt;  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;  
   &lt;body&gt;  
  &lt;img id="scream" src="my.jpg" alt="The Scream" width="220" height="277"&gt;
  
  &lt;p&gt;Canvas:&lt;/p&gt;
  &lt;canvas id="myCanvas" width="500" height="500" &gt;
  Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt;
    &lt;script&gt;  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  var img=document.getElementById("scream");
  ctx.drawImage(img,10,10);  
  var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
  
        context.beginPath();
        context.rect(188, 50, 200, 100);
        context.fillStyle = 'yellow';
        context.fill();
        context.lineWidth = 7;
        context.strokeStyle = 'black';
        context.stroke();
    &lt;/script&gt;  
   &lt;/body&gt;  
   &lt;/html&gt;  
  </code></pre>