HTML5 Canvas - How to draw rectangle over image in canvas

Question

Actually, I am able to do it using img.onload function. Something I got from \'HTML5 Canvas - How to Draw a line over an image background?\'. But I need to draw

Answer 1

Because you are not waiting for the image to load first. In your script add an window.onload()

<script>
window.onload = function() {
  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();
}
</script>

What is happening is it's trying to draw the image before it loaded, doing window.onload will call the code once the entire document is loaded (such as images). Otherwise it may display no image or draw it out of line.

Answer 2

I tried this same approach of using window.onload() and it worked until I tried it using Microsoft Edge browser. A solution to that which worked for me was to attach an onload handler to the image, such as:

image.onload = function ()
{
    context.drawImage(image, 0, 0);
}

then it worked perfectly.