Desenhar na tela com JavaScript
Tudo com base 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>
Tente você mesmo " Passo 1: encontrar o elemento Canvas
Primeiro de tudo, você deve encontrar o <canvas> elemento.
Isto é feito usando o método HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Passo 2: Criar um objeto de desenho
Em segundo lugar, você precisa de um objeto de desenho para a tela.
O getContext() é um objecto HTML embutido, com propriedades e métodos de estiragem:
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 padrão fillStyle é preto.
O fillRect( x,y,width,height ) método desenha um retângulo, preenchido com o estilo de preenchimento, na tela:
ctx.fillRect(0,0,150,75);