HTML5 Canvas - How to draw rectangle over image in canvas

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.

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

<script>
window.onload = function() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var img = document.getElementById('scream');

  context.drawImage(img, 10, 10);

  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.