Risposte:
Le tele sono trasparenti per impostazione predefinita.
Prova a impostare un'immagine di sfondo della pagina e poi mettici sopra una tela. Se non viene disegnato nulla sulla tela, puoi vedere completamente lo sfondo della pagina.
Pensa a una tela come a un dipinto su una lastra di vetro.
Credo che tu stia cercando di fare esattamente quello che ho appena provato a fare: voglio due tele impilate ... quella in basso ha un'immagine statica e quella in alto contiene sprite animati. A causa dell'animazione, è necessario rendere trasparente lo sfondo del livello superiore all'inizio del rendering di ogni nuovo fotogramma. Finalmente ho trovato la risposta: non sta usando globalAlpha e non sta usando un colore rgba (). La risposta semplice ed efficace è:
context.clearRect(0,0,width,height);
Se vuoi che un particolare <canvas id="canvasID">
sia sempre trasparente devi solo impostarlo
#canvasID{
opacity:0.5;
}
Invece, se vuoi che alcuni elementi particolari all'interno dell'area della tela siano trasparenti, devi impostare la trasparenza quando disegni, es
context.fillStyle = "rgba(0, 0, 200, 0.5)";
opacity
modifiche non avranno effetto se c'è un riempimento di sfondo nell'area di disegno.
Basta impostare lo sfondo della tela su trasparente.
#canvasID{
background:transparent;
}
Dipingi le tue due tele su una terza tela.
Ho avuto lo stesso problema e nessuna delle soluzioni qui ha risolto il mio problema. Avevo una tela opaca con un'altra tela trasparente sopra di essa. La tela opaca era completamente invisibile ma lo sfondo del corpo della pagina era visibile. I disegni della tela trasparente in alto erano visibili mentre la tela opaca sottostante non lo era.
Non posso commentare l'ultima risposta ma la soluzione è relativamente facile. Basta impostare il colore di sfondo della tua tela opaca:
#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas
Non ne sono sicuro, ma sembra che il colore di sfondo sia ereditato come trasparente dal corpo.