Outro desenho

<script>

    var tela = document.querySelector('canvas');

    var pincel = tela.getContext('2d');

    //retangulo 1
    pincel.fillStyle = 'gray' //propriedade var fill style 
    pincel.fillRect( 0,0 , 600,400 );//aplica 'pinta'

    //retangulo2
    pincel.fillStyle = 'pink' 
    pincel.fillRect( 0,0 , 200,400 );

    //retangulo3
    pincel.fillStyle = 'yellow' 
    pincel.fillRect( 400,0 , 200,400 );

    //triangulo 1
    pincel.fillStyle = 'red';
    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(200,400);
    pincel.lineTo(400,400);
    pincel.fill();

    //triangulo 2
    pincel.fillStyle = 'blue';
    pincel.beginPath();
    pincel.moveTo(300,200);
    pincel.lineTo(200,0);
    pincel.lineTo(400,0);
    pincel.fill();

    //bolinha1
    pincel.fillStyle = 'white';
    pincel.beginPath();
    pincel.arc( 300,200, 80,0, 2*3.14);
    pincel.fill();

    //bolinha2
     pincel.fillStyle = 'black';
    pincel.beginPath();
    pincel.arc( 300,200, 30,0, 2*3.14);
    pincel.fill();

</script>