Creeper, hecho en un canvas un poquito mas chiquito

<meta charset="UTF-8">

<h1>Entendiendo el canvas</h1>

<canvas width="350" height="300" id="pizarra"></canvas>

<script>

    //el canvas es una pizarra donde podemos disenar o pintar.
    //en esta variable con el query obtenemos el canvas con su propiedades
    var pizarra = document.querySelector('canvas');

    //esta variable lo que hace es que tomamos el context
    //es decir las dimensiones donde trabajaremos y le pasamos
    //por parametro si el dibujo sera en dos dimensiones o tres
    var pincel = pizarra.getContext("2d");

    pincel.fillStyle = "darkgreen "; // propiedad. por eso tiene un igual
    pincel.fillRect(0,0, 350, 300); // funcion. por eso toma parametros

    //funcion para fillrect
    function colorearRectangulos(color, ejeIx, ejeIy, rellenoX, rellenoY){
    pincel.fillStyle = color; // propiedad. por eso tiene un igual
    pincel.fillRect(ejeIx,ejeIy, rellenoX, rellenoY); // funcion. por eso toma parametros
    }

    colorearRectangulos('black', 50,60,90,90)
    colorearRectangulos('black', 210,60,90,90)
    colorearRectangulos('black', 140,150,70,100)
    colorearRectangulos('black', 110,180,40,300)
    colorearRectangulos('black', 210,180,35,300)





    //funcion para no tener que repetir tanto
    function pincelDibuja(color, ejeX1, ejeY1,ejeX2,ejeY2,ejeX3,ejeY3){
        pincel.fillStyle = color; // propiedad
        pincel.beginPath(); //iniciacion del pincel
        pincel.lineTo(ejeX1,ejeY1); // le decimos a que punto queremos que vaya
        pincel.lineTo(ejeX2,ejeY2);// le decimos a que punto queremos que vaya
        pincel.lineTo(ejeX3,ejeY3);// le decimos a que punto queremos que vaya
        pincel.fill(); // llenamos los puntos o dibujamos las lineas
    }




</script>