Desenho no Canvas HTML
- Página Anterior Introdução ao Canvas
- Próxima Página Coordenadas do Canvas
Desenhar no canvas usando JavaScript
Todos os desenhos no canvas HTML devem ser feitos usando JavaScript:
Exemplo
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Passo 1: Encontrar o elemento Canvas
Primeiro, você deve encontrar o elemento <canvas>.
Isso é feito usando o método DOM HTML getElementById():
const canvas = document.getElementById("myCanvas");
Passo 2: Criar o objeto de desenho
Em seguida, você precisa de um objeto de desenho de canvas.
getContext() é um objeto HTML integrado que fornece propriedades e métodos para desenho:
const ctx = canvas.getContext("2d");
Passo 3: Desenhar no canvas
Por fim, você pode desenhar no canvas.
Defina o estilo de preenchimento do objeto de desenho como vermelho:
ctx.fillStyle = "#FF0000";
A propriedade fillStyle pode ser uma cor CSS, uma gradiente ou um padrão. O fillStyle padrão é preto.
O método fillRect(x, y, width, height) desenha um retângulo no canvas, preenchendo com o estilo de preenchimento:
ctx.fillRect(0, 0, 150, 75);
Veja também:
- Página Anterior Introdução ao Canvas
- Próxima Página Coordenadas do Canvas
