Olá você que me lê. Hoje vamos criar e redimensionar o tamanho do canvas.
Criação
de início precisamos abrir as tags html
<canvas id="canvas">Seu navegador não suporta este conteúdo</canvas>
Note que a tag canvas possui o atributo "ID" para que possamos capturar a tag pelo JavaScript. Também é usada uma frase em meio as tags para informar navegadores que não possuam compatibilidade com Canvas.
Veja a lista de navegadores com suporte aqui
Logo após precisamos capturar a tag HTML para o JavaScript
const canvas = document.getElementById('canvas')
Foi utilizado a função de captura direto pelo id, mas nada impede de usar outras funções como a de querySelector.
Redimensionamento
Após a criação só trabalharemos com o documento JavaScript, para fazer o redimensionamento utilizamos a constante canvas previamente capturada.
Pode-se definir tamanhos em pixels passando os valores para a largura(width) e altura(height)
canvas.width = 300
canvas.height = 300
Ou pode-se utilizar o tamanho completo da janela que o canvas será executado
canvas.width = window.innerWidth
canvas.height = window.innerHeight
é possivel alteração de estilo por CSS, porém para um melhor desempenho e para deixar o canvas dinâmico o melhor é redimensioná-lo diretamente no javaScript
Pronto agora sabemos exatamente como podemos criar e alterar o tamanho do nosso canvas, para alteração de estilo, cor, bordas, sombras e etc utilizamos CSS.
Obrigado por ler, dúvidas, sugestões ou críticas, aqui embaixo nos comentários ou por email. Terei o prazer em responder.
Referências:
Top comments (0)