globalAlpha thuộc tính trả về giá trị minh bạch của bản vẽ. Giá trị 1.0 của thuộc tính này chỉ định không minh bạch và giá trị 0.0 của thuộc tính này chỉ định hoàn toàn minh bạch. Do đó, bằng cách đặt thuộc tính globalAlpha thành 0.0, chúng ta có thể có được một canvas trong suốt.
Ví dụ
Bạn có thể thử chạy mã sau để tạo canvas trong suốt -
<!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>