MEU ESQUADRO

Com direito à "Margem" de arco-iris <3

<canvas width="900" height="700"></canvas>
<script>

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

    /*
    pincel.fillStyle = "grey";
    pincel.fillRect(0,0,600,400);
    */

    function desenhaQuadrado (x,y,cor){

        pincel.fillStyle = "cor";
        pincel.fillRect(posicaox, posicaoy,lagura,altura);

    }

    pincel.fillStyle = "red";
    pincel.fillRect(0,0,900,100);

    pincel.fillStyle = "orange";
    pincel.fillRect(0,100,900,100);

    pincel.fillStyle = "yellow";
    pincel.fillRect(0,200,900,100);

    pincel.fillStyle = "green";
    pincel.fillRect(0,300,900,100);

    pincel.fillStyle = "blue";
    pincel.fillRect(0,400,900,100);

    pincel.fillStyle = "indigo";
    pincel.fillRect(0,500,900,100);

    pincel.fillStyle = "purple";
    pincel.fillRect(0,600,900,100);

    pincel.fillStyle = "white";
    pincel.fillRect(50,50,800,600);


    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.moveTo(100,600);
    pincel.lineTo(100,100);
    pincel.lineTo(500,600);
    pincel.fill();

    pincel.fillStyle = "white";
    pincel.beginPath();
    pincel.moveTo(150,550);
    pincel.lineTo(150,250);
    pincel.lineTo(400,550);
    pincel.fill();



</script>