05.12.2024

Canvas HTML em Tela Cheia: Mantendo a Funcionalidade

Resposta Rápida

Para criar um canvas HTML que se adapte para ocupar a tela cheia, defina sua largura e altura usando window.innerWidth e window.innerHeight. No CSS, você deve posicionar o canvas para eliminar margens, garantindo que ele ocupe toda a tela visível:

const canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.onresize = () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

Esse código garante que o canvas seja responsivo, preenchendo toda a tela à medida que a janela do navegador é redimensionada.

Otimização de Desempenho: A Velocidade é Importante

Redimensionar o canvas HTML para tela cheia pode afetar a velocidade de renderização. Para garantir uma animação suave e um desempenho melhorado, use window.requestAnimationFrame:

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}

function animate() {
  resizeCanvas();
  // Realize a renderização aqui
  window.requestAnimationFrame(animate);
}

animate();

É importante lembrar que mudanças repentinas no tamanho da janela podem levar a perda de desempenho devido ao "thrashing" no gerenciamento de eventos. Portanto, é crucial mitigar esse efeito de "thrashing".

Preservando Proporções

Para funcionar corretamente em modo tela cheia, considere o seguinte:

1. Adapte o conteúdo às novas dimensões da tela.
2. Redesenhe formas e imagens nas proporções corretas.
3. Ajuste elementos interativos ou sistemas de partículas conforme necessário.

Aplique esses princípios usando a função resizeCanvas.

Quer se Imersão Completa no Modo Tela Cheia? Utilize a API de Tela Cheia

Para ativar o verdadeiro modo tela cheia, use a API de Tela Cheia do HTML5:

canvas.addEventListener('click', function() {
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.webkitRequestFullScreen) {
    canvas.webkitRequestFullScreen();
  } else if (canvas.mozRequestFullScreen) {
    canvas.mozRequestFullScreen();
  }
});

Não se esqueça de considerar as versões prefixadas da API de tela cheia para garantir a funcionalidade adequada em diferentes navegadores.

Visualização

Pense na página da web como um palco onde a mágica acontece, e o canvas é a ferramenta que cria essa mágica. Para tornar o canvas tela cheia, estique-o para ocupar toda a área visível:

• Antes de esticar: o canvas se encaixa com outros elementos na página.
• Depois de esticar: o canvas domina a cena visível.

Usando HTML e CSS, torne o canvas responsivo para qualquer tamanho de tela:

<canvas id="fullscreenCanvas"></canvas>

#fullscreenCanvas {
  width: 100vw;  
  height: 100vh;
  display: block;
  position: fixed; 
  top: 0;
  left: 0;
}

Agora você tem um canvas responsivo que ocupa toda a tela.

Como Evitar Problemas no Modo Tela Cheia

Ao trabalhar em modo tela cheia, esteja ciente das seguintes nuances:

1. Densidade de Pixels: Considere dispositivos com densidades de pixels variadas usando window.devicePixelRatio.
2. Compatibilidade de Navegadores: Lembre-se de levar em conta os prefixos específicos da API de tela cheia.
3. Saindo do Modo Tela Cheia: Sempre forneça uma forma de sair, monitorando o evento fullscreenchange.
4. Relação de Aspecto: Mantenha a forma correta e a harmonia visual durante qualquer redimensionamento para evitar distorções.

Realize testes em vários navegadores e dispositivos para garantir uma experiência de usuário consistente para todos.

Recursos Úteis

1. API de Tela Cheia — APIs da Web | MDN - Um guia abrangente sobre o uso da API de Tela Cheia.
2. Referência do Canvas HTML - Uma referência para a tag de canvas HTML e seus atributos.
3. Canvas é esticado ao usar CSS - Uma discussão sobre como criar um canvas responsivo no StackOverflow.
4. Padrão da API de Tela Cheia - A especificação oficial para a API de Tela Cheia.
5. Como Usar a API de Tela Cheia do HTML5 - Um tutorial sobre como implementar o modo tela cheia usando HTML5.
6. API de Tela Cheia | Posso usar… - Um verificador de compatibilidade da API de Tela Cheia em vários navegadores.

Video

Navigation