Draw \/ Save<\/title>\n <style>\n canvas { border: 1px solid #ccc; display: block; margin: auto; }\n <\/style>\n<\/head>\n<body>\n <canvas><\/canvas>\n <script>\n \/\/ setup\n var c = document.getElementsByTagName('canvas')[0],\n ctx = c.getContext('2d');\n\n c.height = window.innerHeight - 20;\n c.width = window.innerWidth - 20;\n \n c.onclick = function () {\n window.open(c.toDataURL('image\/png'), '');\n };\n <\/script>\n<\/body>\n<\/html>","javascript":"function showLoader() {\n var WIDTH = ctx.canvas.width,\n HEIGHT = ctx.canvas.height,\n i = 0,\n DEGREE = 10 * Math.PI \/ 180;\n \n \/\/ code goes here!\n setInterval(function () {\n \/\/ this shouldn't fill in black, it should really remove the red lightly keeping the background\n \/\/ constantly exposed\n \/\/ctx.fillStyle = 'rgba(0,0,0,0.05)';\n \/\/ctx.fillRect(0, 0, WIDTH, HEIGHT);\n \n ctx.clearRect(WIDTH \/ 2 - 30, HEIGHT \/ 2 - 30, 60, 60);\n \n for (j = 0, max = 15; j < max; j += 1) {\n ctx.beginPath();\n ctx.lineWidth = 10;\n ctx.strokeStyle = 'rgba(255,0,0,' + (1 * ((max - j) \/ max)) + ')';\n i += DEGREE \/ 10;\n ctx.arc(WIDTH\/2, HEIGHT\/2, 25, i - DEGREE * 2 * j, i - DEGREE * 2 * (j - 1), false);\n ctx.stroke();\n ctx.closePath();\n }\n }, 30);\n}\n\nfunction loadImage(data) {\n var i = new Image();\n i.onload = function () {\n ctx.canvas.width = this.width;\n ctx.canvas.height = this.height;\n ctx.canvas.style.background = 'url(' + data + ') no-repeat';\n showLoader();\n };\n i.src = data;\n}\n\n\nvar s = document.createElement('script');\ns.src = 'http:\/\/i.tinysrc.mobi\/data.loadImage\/http:\/\/farm6.static.flickr.com\/5145\/5597624654_81a7f54515