exercício

<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>