[Sugerencia] CREEPER

EN ESTE CASO UTILICE UNA PEQUEÑA AYUDA BUSCADA EN INTERNET, PARA FACILITAR LA UBICACION DE LAS COORDENADAS EN EL CANVAS

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

 <script>
     // SE USO ESTE CODIGO PARA MOSTRAR EN CONSOLA AL HACER CLIC, LAS COORDENADAS APROXIMADAS..
     // PARA UNA MEJOR GUIA A LA HORA DE UBICAR LAS PARTES DE LA CARA.
     var canvas = document.querySelector('canvas');
     canvas.addEventListener('click', function(event) {
         var rect = canvas.getBoundingClientRect();
         var x = event.clientX - rect.left;
         var y = event.clientY - rect.top;
         console.log('Coordenadas x: ' + x + ', Coordenadas y: ' + y);
     });


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

     //CABEZA
     pincel.fillStyle = "green";
     pincel.fillRect(0, 0, 350, 300);

     //OJO IZQUIERDO
     pincel.fillStyle = "black";
     pincel.fillRect(45, 45, 90, 90);

     //OJO DERECHO
      pincel.fillStyle = "black";
     pincel.fillRect(205, 45, 90, 90);

     //NARIZ
     pincel.fillStyle = "black";
     pincel.fillRect(135,135,70, 100);

     //BOCA IZQUIERDA
     pincel.fillStyle = "black";
     pincel.fillRect(100,190,40,110);

     //BOCA DERECHA
     pincel.fillStyle = "black";
     pincel.fillRect(200,190,40, 110);


 </script>