Como faço para criar uma tela transparente em html5?

Como posso tornar uma tela transparente? Preciso, porque quero colocar duas telas uma sobre a outra.

As telas são transparentes por padrão.

Tente definir uma imagem de fundo da página e coloque uma tela sobre ela. Se nada for desenhado na tela, você poderá ver completamente o plano de fundo da página.

Pense em uma tela como se estivesse pintando um prato de vidro.

Acredito que você esteja tentando fazer exatamente o que acabei de tentar: quero duas telas empilhadas ... a inferior tem uma imagem estática e a superior contém sprites animados. Por causa da animação, você precisa limpar o fundo da camada superior para ficar transparente no início da renderização de cada novo quadro. Finalmente encontrei a resposta: não está usando globalAlpha e não está usando uma cor rgba (). A resposta simples e eficaz é:

context.clearRect(0,0,width,height);

Se você quer que um determinado <canvas id="canvasID">seja sempre transparente, basta definir

#canvasID{
    opacity:0.5;
}

Em vez disso, se você deseja que alguns elementos particulares dentro da área da tela sejam transparentes, defina a transparência ao desenhar, ou seja,

context.fillStyle = "rgba(0, 0, 200, 0.5)";

Basta definir o plano de fundo da tela como transparente.

#canvasID{
    background:transparent;
}

Pinte suas duas telas em uma terceira tela.

Eu tive esse mesmo problema e nenhuma das soluções aqui resolveu o meu problema. Eu tinha uma tela opaca com outra tela transparente acima dela. A tela opaca era completamente invisível, mas o fundo do corpo da página era visível. Os desenhos da tela transparente na parte superior eram visíveis, enquanto a tela opaca abaixo dela não era.

Não posso comentar a última resposta, mas a correção é relativamente fácil. Basta definir a cor de fundo da sua tela opaca:

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

Não tenho certeza, mas parece que a cor de fundo é herdada como transparente do corpo.