Desenho em tela HTML
Desenhe na tela com JavaScript
Todo desenho na tela HTML deve ser feito com JavaScript:
Exemplo
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Etapa 1: encontre o elemento de tela
Em primeiro lugar, você deve encontrar o elemento <canvas>.
Isso é feito usando o método HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Etapa 2: criar um objeto de desenho
Em segundo lugar, você precisa de um objeto de desenho para a tela.
O getContext() é um objeto HTML embutido, com propriedades e métodos para desenhar:
var ctx = canvas.getContext("2d");
Etapa 3: desenhe na tela
Finalmente, você pode desenhar na tela.
Defina o estilo de preenchimento do objeto de desenho para a cor vermelha:
ctx.fillStyle = "#FF0000";
A propriedade fillStyle pode ser uma cor CSS, um gradiente ou um padrão. O fillStyle padrão é preto.
O método fillRect( x,y,width,height ) desenha um retângulo, preenchido com o estilo de preenchimento, na tela:
ctx.fillRect(0, 0, 150, 75);