canvas rajz/kép átlátszó vagy látható

A globalalfa = átlátszóság, globalCompositeOperation = láthatóság

A canvas globalAlpha tulajdonság beállítja rajzunk aktuális alfa vagy átláthatósági értékét.
A canvas globalCompositeOperation tulajdonságaival beállíthatjuk, meglévő rajzunkon vagy képen, hogy jelenjen meg, a következő rajz vagy kép

A canvas globalAlpha értékét, számokkal kell meghatározni. Értéke: 0.0 (teljesen átlátszó) és 1.0 (nincs átlátszóság) között legyen,
alapértelmezett értéke: 1.0 (Nincs átlátszódág.)
A canvas globalCompositeOperation értékeinek, meghatározásokat kel megadnunk, melyeket a lenti táblázatban láthatunk,
alapértelmezett értéke: source-over

Canvas compositing / kompozíciók

Property	Leírás
globalAlpha	Beállítja őt követő rajz/rajzok aktuális alfa vagy átlátszósági értékét. Átlátszósági rajzokat követöen, vissza kell állítani globalAlpha = 1.0-ra. globalAlpha = 0.0 - akkor teljesen átlátszó. globalAlpha = 1.0 - akkor nincs átlátszóság.
globalCompositeOperation	Beállítja, hogyan készítsen új rajzot vagy képet, egy meglévő rajzra vagy képre. Példa: fillStyle = "blue"; fillRect(20, 20, 60, 50); globalCompositeOperation = "source-over"; arc(75,65,30,0,2*Math.PI); fillStyle = "#f00"; fill();

Canvas globalCompositeOperation értékei, meghatározásai

Értékei	Leírás	Bemutató
source-over	Alapértelmezett. Megjeleníti célképen, a forrásképet.
source-atop	Megjeleníti célképen a forrásképet úgy, hogy a célképen kívül lévő forráskép részei, nem jelennek meg.
source-in	Megjeleníti forrásképet úgy, hogy csak a célképen belüli része lesz látható, és a célkép, átlátszó lesz.
source-out	Megjeleníti forrásképet úgy, hogy csak a célképen kivüli része lesz látható, és a célkép, átlátszó lesz.
destination-over	Megjeleníti célképet a forrásképen.
destination-atop	Megjeleníti célképet a forrásképen úgy, hogy a forrásképen kívül eső célkép, nem jelenik meg.
destination-in	Megjeleníti célképet a forrásképen úgy, hogy csak a forrásképen belül lévő része lesz látható, és a forráskép átlátszó lesz.
destination-out	Megjeleníti célképet a forrásképen úgy, hogy csak a forrásképen kivül lévő része lesz látható, és a forráskép átlátszó lesz.
lighter	Megjeleníti a forrásképet + a célképet.
copy	Megjeleníti forrásképet úgy, hogy a célképet figyelmen kívül hagyja.
xor	A képek azon része lesz átlátszó, mely a másik kép területén is, jelen van. OR vagy A képek azon része lesz látható, mely a másik kép területén kívül van.

globalAlpha példa

1. Rajzolunk egy piros négyszöget.
2. Átlátszóságot globalAlpha=0,2 értékre állítjuk.
3. Rajzolunk egy kék, és egy zöld négyszöget.
4. Átlátszóságot alaphelyzetbe állítjuk.
5. Rajzolunk egy sárga négyszöget.

var c = document.getElementById("globalAlpha");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

// Állítsuk be az átlátszóságot.
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue"; 
ctx.fillRect(50, 50, 75, 50); 
ctx.fillStyle = "green"; 
ctx.fillRect(80, 80, 75, 50);
// Állítsuk alaphelyzetbe az átlátszóságot.
ctx.globalAlpha = 1.0;
ctx.fillStyle = "yellow"; 
ctx.fillRect(110, 110, 75, 50);

globalCompositeOperation példa

1. Példa:
Alakzatokat rajzolunk, két különböző globalCompositeOperation érték segítségével.

var c = document.getElementById("globalComposite");
var ctx = c.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue"; 
ctx.fillRect(50, 50, 75, 50); 
ctx.fillStyle = "red";
ctx.fillRect(150, 20, 75, 50);

ctx.globalCompositeOperation = "destination-over";
ctx.fillStyle = "blue"; 
ctx.fillRect(180, 50, 75, 50);

2. Példa:
Kék színű alakzatok felülre, piros színű alakzatok alulra kerülnek.
Majd elhelyezünk egy zöld színű alakzatot, melynek csak azon részei lesznek láthatók, melyek bármely meglévő alakzat
területére esik.

var c = document.getElementById("globalComposite");
var ctx = c.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(40, 20, 75, 50);

ctx.globalCompositeOperation = "destination-over";
ctx.arc(85,85,50,0,2*Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.fillStyle = "red";
ctx.fillRect(100, 120, 75, 50);

ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "blue"; 
ctx.fillRect(70, 100, 75, 50);
ctx.closePath();

ctx.beginPath()
ctx.globalCompositeOperation = "source-atop";
ctx.arc(155,90,60,0,2*Math.PI);
ctx.fillStyle = "green";
ctx.fill();