<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 toasterGradient(width, height) {
  var texture = document.createElement('canvas');
  var ctx = texture.getContext('2d');

  texture.width = width;
  texture.height = height;

  // Fill a Radial Gradient
  // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
  var gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width * 0.6);

  gradient.addColorStop(0, "#804e0f");
  gradient.addColorStop(1, "#3b003b");

  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, width, height);

  return ctx
}

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);

  var gradient = toasterGradient(width, height);

  ctx.drawImage(gradient.canvas, 0, 0);
}

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