Comment faire un canevas transparent en html5 ?

Question

Comment rendre une toile transparente ? J'en ai besoin parce que je veux mettre deux toiles l'une sur l'autre.

Answer 1

fillStyle n'est peut-être pas ce que vous recherchez, car il ne peut pas vraiment éclaircir la toile ; il la peindra soit d'une couleur unie, soit d'une couleur transparente qui ne peint rien.

L'astuce qui a fonctionné pour moi repose sur un détail d'implémentation de la fonction <canvas></canvas> . Ils se "réinitialisent" lorsqu'ils sont redimensionnés (testé sur Chrome et Firefox) :

canvas.width = canvas.width

Ce phénomène m'a d'abord semblé être un comportement très ennuyeux, mais il est aussi devenu le seul moyen que je connaisse pour réinitialiser la toile.

Answer 2

Je ne peux pas commenter la dernière réponse mais la solution est relativement facile. Il suffit de définir la couleur de fond de votre toile opaque :

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

Je ne suis pas sûr mais il semble que la couleur d'arrière-plan soit héritée comme transparente du corps.