<!-- 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);
//
pincel.fillStyle = "yellow";
//para começar a escrita
pincel.beginPath();
//em qual localização deve começar essa escrita
pincel.moveTo(300,200);
//se moveate onde deve ir seguindo as coordenadas da função moveTo
pincel.lineTo(200, 400);
//se moveate onde deve ir seguindo as coordenadas da função moveTo
pincel.lineTo(400, 400);
//com esta função ele preenche o perimetro designado da ultima cor atribuida ao pincel
pincel.fill();
</script>
