Propriété : CanvasRenderingContext2D.globalAlpha

Contient le niveau d'opacité alpha du contexte de canvas

Syntaxe
Number ctx.globalAlpha

Compatible tous navigateurs

Oui

Description
Contient le niveau de transparence alpha du contexte de canvas.
La valeur 0 indique une transparence totale
La valeur 1 indique une opacité totale

Exemple 1 : Superposition de boites avec transparence

Code source

<canvas id="myCanevas" style="width:250px; height:250px; background:#fff" ></canvas>

<script type="text/javascript">
var ctx = document.getElementById("myCanevas").getContext('2d');

ctx.globalAlpha = 1;
ctx.fillStyle = "#316AC5";
ctx.fillRect(5, 5, 150, 150);

ctx.globalAlpha = 0.5;
ctx.fillStyle = "#FFA500";
ctx.fillRect(30, 40, 200, 100);

ctx.globalAlpha = 0.2;
ctx.fillStyle = "#FFF";
ctx.fillRect(80, 10, 120, 80);

</script>

Résultat

Emulation de la console

Explication

Superposition de rectangles plein avec différents niveaux de transparence.

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 19/04/2020