HTML5 Canvas - Criando e alterando tamanho

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:

Livro -> Desenvolva jogos com HTML5 Canvas e JavaScript