674003-alpha-radial-gradient-superlum.html (1214B)
1 <body bgcolor="orange"> 2 <canvas width="300" height="300" id="testcase-canvas" style="display:none"></canvas> 3 <canvas width="300" height="300" id="testcase-canvas-dest"></canvas> 4 <script> 5 const kShadow = "rgba(00%, 0%, 0%, 1)"; 6 const kTransparent = "rgba(0%, 100%, 100%, 0.5)"; 7 8 var cx, g; 9 10 cx = document.getElementById('testcase-canvas').getContext('2d'); 11 12 cx.fillStyle = kShadow; 13 cx.fillRect(100, 50, 150, 50); 14 15 g = cx.createLinearGradient(0, 50, 0, 0); 16 g.addColorStop(0, kShadow); 17 g.addColorStop(0.2, kTransparent); 18 g.addColorStop(1, kTransparent); 19 cx.fillStyle = g; 20 cx.fillRect(100, 0, 150, 50); 21 22 g = cx.createRadialGradient(100, 100, 50, 100, 100, 100); 23 g.addColorStop(0, kShadow); 24 g.addColorStop(0.2, kTransparent); 25 g.addColorStop(1, kTransparent); 26 cx.fillStyle = g; 27 cx.beginPath(); 28 cx.arc(100, 100, 100, Math.PI * 0.5, Math.PI * 1.5); 29 cx.fill(); 30 31 cx2 = document.getElementById('testcase-canvas-dest').getContext('2d'); 32 // draw a chunk of the gradients from above onto testcase-canvas-dest 33 cx2.drawImage(document.getElementById('testcase-canvas'),45,20, 100,20 ,0,0, 100,20); 34 </script> 35 36 </window>