<canvas width='600' height='400' ></canvas>
<script>
var tela= document.querySelector('canvas');// chama o canvas do html
var pincel= tela.getContext('2d');
pincel.fillStyle='lightgrey'//atributo
pincel.fillRect(0,0,600,400);//funçao
pincel.fillStyle='green';
pincel.fillRect(0,0,200,400);
pincel.fillStyle='red';
pincel.fillRect(400,0,600,400);
pincel.fillStyle='yellow';
pincel.beginPath();
pincel.moveTo(300,200); //mover para ponoto de inicio do desenho
pincel.lineTo(200,400);//desenha linha
pincel.lineTo(400,400);
pincel.fill();//preencher
pincel.fillStyle='blue';
pincel.beginPath();
pincel.arc(300,200,50,0,2*3.14);//x e y ponto cental do circulo, raio, angulo inicial e final
pincel.fill();
</script> fiz um extra
<canvas width='600' height='500' ></canvas>
<script>
var tela= document.querySelector('canvas');// chama o canvas do html
var pincel= tela.getContext('2d');
pincel.fillStyle='black'//atributo
pincel.fillRect(0,0,600,500);//funçao
pincel.fillStyle='white';
pincel.fillRect(200,200,200,150);
pincel.fillStyle='black';
pincel.fillRect(202,202,50,100);
pincel.fillStyle='black';
pincel.fillRect(202,202,50,100);
pincel.fillStyle='black';
pincel.fillRect(255,202,50,110);
pincel.fillStyle='white';
pincel.beginPath();
pincel.moveTo(270,70); //mover para ponoto de inicio do desenho
pincel.lineTo(325,70);//desenha linha
pincel.lineTo(350,199);
pincel.lineTo(310,199);
pincel.fill();//preencher
pincel.fillStyle='white';
pincel.beginPath();
pincel.moveTo(390,60); //mover para ponoto de inicio do desenho
pincel.lineTo(440,60);//desenha linha
pincel.lineTo(400,199);
pincel.lineTo(350,199);
pincel.fill();//preencher
pincel.fillStyle='black';
pincel.beginPath();
pincel.moveTo(305,250); //mover para ponoto de inicio do desenho
pincel.lineTo(398,280);//desenha linha
pincel.lineTo(398,330);
pincel.lineTo(308,300);
pincel.fill();//preencher
</script> 