CanvasRenderingContext2D.globalAlpha - прозорість.
ctx.globalAlpha;
ctx - об'єкт CanvasRenderingContext2D.
globalAlpha властивість об'єкту CanvasRenderingContext2D яка задає / повертає прозорість. Представляє значення від 0 до 1. По замовчуванню дорівнює 1.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillText("JavaScript", 50, 30);
ctx.globalAlpha=0.2;
ctx.fillStyle="red";
ctx.fillRect(40, 10, 70, 70);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="#a56789";
ctx.fillRect(10, 10, 100, 70);
ctx.globalAlpha=0.4;
ctx.font="24pt arial";
ctx.fillStyle="black";
ctx.fillText("JavaScript", 48, 52);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalAlpha=0.12;
ctx.fillStyle="red";
for (i = 0; i < 6; i++){
ctx.beginPath();
ctx.arc(90, 90, 25 * i, 0, Math.PI * 2, true);
ctx.fill();
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle="black";
for(i=1, y=0; i>0; i-=0.1, y+=20){
ctx.globalAlpha=i;
ctx.fillRect(0, y, canvas.width, 20);
}