<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> function paintCanvas() { var elem = document.getElementById("mycanv"); var ctx = elem.getContext('2d'); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, 200, 200); ctx.beginPath(); ctx.arc(150, 150, 100, 0, Math.PI * 2, true); ctx.closePath(); ctx.clip(); // create radial gradient var grd = ctx.createRadialGradient(110, 110, 42, 110, 110, 121); grd.addColorStop(0, '#FFFFFF'); grd.addColorStop(1, '#E5E5E5'); ctx.fillStyle = grd; // This should be completely clipped out! ctx.fillRect(0, 0, 1, 1); } </script> </head> <body onload="paintCanvas();"> <canvas width=200 height=200 moz-opaque="true" id="mycanv"></canvas> </body> </html>