<!-- habilitando uma tela para desenhar, width é a largura e height a altura -->
<canvas width="600" height="400"></canvas>
<script>
//trazendo o canva para o mundo javaScript
var tela = document.querySelector("canvas");
//com .getContext() podemos pedir um pincel em 2D"ou 3 4 5 6 d" para escrever na tela
var pincel = tela.getContext("2d");
//.fillStyle nao é uma função, ele receber um valor que é a cor lighrgray que é cinza
pincel.fillStyle = "lightgrey";
//.fillRect para preencher um retangulo "com a cor designada logo a cima" em tais coordenadas, inicio x=0, y=0, no tamanho 600,400.
pincel.fillRect(0, 0, 600, 400);
//criando um pincel na cor verde, depois pintando meu canva
pincel.fillStyle = "green";
pincel.fillRect(0, 0, 200, 400 );
//criando um pincel na cor verde, depois pintando meu canva
pincel.fillStyle = "red";
pincel.fillRect(400, 0, 400,400);
</script>
