วิธีสร้าง canvas โปร่งใสใน HTML5

คุณสมบัติ globalAlpha คืนค่าความโปร่งใสของการวาดภาพ ค่า 1.0 หมายถึงไม่โปร่งใส และค่า 0.0 หมายถึงโปร่งใสสมบูรณ์ ดังนั้น การตั้งค่า globalAlpha เป็น 0.0 จะทำให้ได้ canvas โปร่งใส

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อสร้าง canvas โปร่งใส:

<!DOCTYPE html>
<html>
  <body>
    <canvas id="idCanvas" width="400" height="200" style="border:2px solid #000000;">
      Your browser does not support the HTML5 canvas tag.</canvas>
    <script>
      var c = document.getElementById("idCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "green";
      ctx.fillRect(20, 20, 75, 50);
      ctx.globalAlpha = 0.0;
      ctx.fillStyle = "yellow";
      ctx.fillRect(50, 50, 75, 50);
      ctx.fillStyle = "red";
      ctx.fillRect(80, 80, 75, 50);
    </script>
  </body>
</html>