<!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>