1304353-text-global-alpha-2-ref.html (879B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 6 <script> 7 function do_test() { 8 var canvas = document.getElementById("test"); 9 var ctx = canvas.getContext("2d"); 10 11 var g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); 12 g.addColorStop(0, "red"); 13 g.addColorStop(1, "green"); 14 15 ctx.fillStyle = g; 16 ctx.fillRect(0, 0, canvas.width, canvas.height); 17 18 ctx.strokeStyle = "white"; 19 ctx.font = "bold 24px sans-serif"; 20 21 ctx.strokeText('globalAlpha = 1.0', 20, 40); 22 23 // for reference, use a stroke color with alpha instead of global alpha 24 ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"; 25 ctx.strokeText('globalAlpha = 0.5', 20, 80); 26 27 ctx.strokeStyle = "rgba(255, 255, 255, 0.2)"; 28 ctx.strokeText('globalAlpha = 0.2', 20, 120); 29 }; 30 </script> 31 32 </head> 33 34 <body onload="do_test()"> 35 36 <canvas id="test"></canvas> 37 38 </body> 39 </html>