<!DOCTYPE html>
<!-- source: http://jsbin.com/canvas/73 -->
<html>
<head>
<meta charset=utf-8 />
  <title>Draw / Save</title>
  <style>
    canvas { border: 1px solid #ccc; display: block; margin: auto; }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    // setup
    var c = document.getElementsByTagName('canvas')[0],
    ctx = c.getContext('2d');

    c.height = window.innerHeight - 20;
    c.width = window.innerWidth - 20;
    
    c.onclick = function () {
      window.open(c.toDataURL('image/png'), '');
    };
    </script>
<script id="jsbin-javascript">
function showLoader() {
  var WIDTH = ctx.canvas.width,
      HEIGHT = ctx.canvas.height,
      i = 0,
      DEGREE = 10 * Math.PI / 180;
  
  // code goes here!
  setInterval(function () {
    // this shouldn't fill in black, it should really remove the red lightly keeping the background
    // constantly exposed
    //ctx.fillStyle = 'rgba(0,0,0,0.05)';
    //ctx.fillRect(0, 0, WIDTH, HEIGHT);
    
    ctx.clearRect(WIDTH / 2 - 30, HEIGHT / 2 - 30, 60, 60);
    
    for (j = 0, max = 15; j < max; j += 1) {
      ctx.beginPath();
      ctx.lineWidth = 10;
      ctx.strokeStyle = 'rgba(255,0,0,' + (1 * ((max - j) / max)) + ')';
      i += DEGREE / 10;
      ctx.arc(WIDTH/2, HEIGHT/2, 25, i - DEGREE * 2 * j, i - DEGREE * 2 * (j - 1), false);
      ctx.stroke();
      ctx.closePath();
    }
  }, 30);
}

function loadImage(data) {
  var i = new Image();
  i.onload = function () {
    ctx.canvas.width = this.width;
    ctx.canvas.height = this.height;
    ctx.canvas.style.background = 'url(' + data + ') no-repeat';
    showLoader();
  };
  i.src = data;
}


var s = document.createElement('script');
s.src = 'http://i.tinysrc.mobi/data.loadImage/http://farm6.static.flickr.com/5145/5597624654_81a7f54515_z.jpg';
document.body.appendChild(s);
</script>
</body>
</html>