817019-1.html (933B)
1 <!DOCTYPE html> 2 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <script type="text/javascript"> 8 function paintCanvas() { 9 var elem = document.getElementById("mycanv"); 10 var ctx = elem.getContext('2d'); 11 12 ctx.fillStyle = 'white'; 13 ctx.fillRect(0, 0, 200, 200); 14 ctx.beginPath(); 15 ctx.arc(150, 150, 100, 0, Math.PI * 2, true); 16 ctx.closePath(); 17 ctx.clip(); 18 19 // create radial gradient 20 var grd = ctx.createRadialGradient(110, 110, 42, 110, 110, 121); 21 grd.addColorStop(0, '#FFFFFF'); 22 grd.addColorStop(1, '#E5E5E5'); 23 24 ctx.fillStyle = grd; 25 // This should be completely clipped out! 26 ctx.fillRect(0, 0, 1, 1); 27 } 28 </script> 29 </head> 30 <body onload="paintCanvas();"> 31 <canvas width=200 height=200 moz-opaque="true" id="mycanv"></canvas> 32 </body> 33 </html>