<canvas id="canvas" width="500" height="500"></canvas>

var photo = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'black';
ctx.font = '24px monospace';
ctx.fillText('Loading image...', 20, 40);

function render() {
  // Scale so that the image fills the container
  var width = window.innerWidth;
  var scale = width / photo.naturalWidth;
  var height = photo.naturalHeight * scale

  canvas.width = width;
  canvas.height = height;

  ctx.drawImage(photo, 0, 0, width, height);
}

photo.onload = render;
photo.crossOrigin = "Anonymous";
photo.src = "https://s3.amazonaws.com/share.viget.com/images/viget-works.jpg?bust=true";