Revisando tema 2 do curso 4

<!--MAR_FELIZ-->

<canvas width="600" height="400"></canvas>

<script>

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

    function desenhaTriangulo(xa, ya, xc, yc, cor){

        pincel.fillStyle = cor;
        pincel.beginPath(xa, ya);
        pincel.moveTo(xa, ya);
        pincel.lineTo(xa, yc);
        pincel.lineTo(xc, yc);
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {
        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2*3.14);
        pincel.fill();
    }

    function desenhaQuadradoRetangulo(x, y, tamanho1, tamanho2, cor) {
        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho1, tamanho2);
    }

    function desenhaTexto(texto, x , y, color) {
        pincel.font='40px Georgia';
        pincel.fillStyle= color;
        pincel.fillText(texto, x, y);  
    }

    desenhaQuadradoRetangulo(0, -250, 600, 400,'orange');
    desenhaCirculo(350, 120, 60, 'red');
    desenhaQuadradoRetangulo(0, 150, 600, 400,'blue');
    desenhaCirculo(215, 230, 80, 'brown');
    desenhaQuadradoRetangulo(0, 150, 350, 110,'blue');
    desenhaCirculo(168, 300, 10, 'blue');
    desenhaCirculo(184, 300, 10, 'blue');
    desenhaCirculo(206, 303, 14, 'blue');
    desenhaCirculo(224, 302, 10, 'blue');
    desenhaCirculo(239, 300, 10, 'blue');
    desenhaCirculo(255, 303, 14, 'blue');
    desenhaTriangulo(210,50,100,250,'green');
    desenhaQuadradoRetangulo(210, 50, 10, 210,'pink');
    desenhaTriangulo(220, 80, 310,230,'purple');
    desenhaTexto(' ^', 400,95,'black');
    desenhaTexto('^', 350,120,'black');
    desenhaTexto('^', 300,135,'black');
    desenhaTexto('~    ~                    ~     ~', 0,200, 'white');
    desenhaTexto('  ~                ~      ~     ~', 0,250, 'white');
    desenhaTexto('     ~                 ~       ~     ~', 0,270, 'white');
    desenhaTexto('~     ~     ~     ~    ~', 10,310, 'white');
    desenhaTexto('    ~       ~    ~      ~    ~     ~', 10,330, 'white');
    desenhaTexto('~      ~      ~      ~     ~', 0,350, 'white');
    desenhaTexto('    ~       ~       ~       ~      ~', 0,390, 'white');


</script>