Tạo canvas trong suốt (transparent) trong HTML5

Để làm cho canvas trong suốt, bạn sử dụng thuộc tính globalAlpha của ngữ cảnh vẽ (drawing context). Thuộc tính này kiểm soát độ trong suốt của các hình vẽ tiếp theo.

• Giá trị 1.0 (mặc định): Không trong suốt (độ mờ 0%).
• Giá trị 0.0: Hoàn toàn trong suốt (độ mờ 100%).

Bằng cách thiết lập ctx.globalAlpha = 0.0 trước khi vẽ, bạn có thể tạo ra một canvas trong suốt.

Ví dụ minh họa

<!DOCTYPE html>
<html>
  <body>
    <canvas id="idCanvas" width="400" height="200" style="border:2px solid #000000;">
      Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.
    </canvas>
    <script>
      var c = document.getElementById("idCanvas");
      var ctx = c.getContext("2d");
      
      // Vẽ hình chữ nhật xanh lá (độ mờ mặc định 1.0)
      ctx.fillStyle = "green";
      ctx.fillRect(20, 20, 75, 50);
      
      // Thiết lập trong suốt hoàn toàn
      ctx.globalAlpha = 0.0;
      
      // Hình chữ nhật vàng này sẽ không hiển thị do globalAlpha = 0
      ctx.fillStyle = "yellow";
      ctx.fillRect(50, 50, 75, 50);
      
      // Hình chữ nhật đỏ cũng không hiển thị
      ctx.fillStyle = "red";
      ctx.fillRect(80, 80, 75, 50);
    </script>
  </body>
</html>

Lưu ý quan trọng

Nếu bạn muốn canvas có nền trong suốt nhưng vẫn vẽ được nội dung, hãy không đặt globalAlpha = 0 cho toàn bộ context. Thay vào đó:

• Đảm bảo canvas không có background-color trong CSS.
• Chỉ vẽ những gì bạn cần, các khu vực không vẽ sẽ tự động trong suốt.
• Sử dụng clearRect() để xóa vùng cụ thể nếu cần.