[Duda] ESCUADRA

//USE ESTAS LINEAS PARA UBICAR LAS COORDENADAS EN LA CONSOLA AL HACER CLIC, ASI PODEMOS AYUDARNOS A UBICAR MAS FACILMENTE PARA CUANDO NO NOS ENTREGUEN UNAS COORDENADAS EN ESPECIFICO. PARA EL QUE QUIERA USAR ESTAS LINEAS DE CODIGO ME PARECIERON MUY UTILES YA QUE ES UN POCO CONFUSO UBICARNOS EN ALGUNAS OCASIONES.

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

<script>
    //USE ESTAS LINEAS PARA UBICAR LAS COORDENADAS EN LA CONSOLA AL HACER CLIC, ASI PODEMOS AYUDARNOS A UBICAR MAS FACILMENTE PARA CUANDO NO NOS ENTREGUEN UNAS COORDENADAS EN ESPECIFICO.
    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");
    //pantalla.fillStyle = "black"; 

    //ESCUADRA NEGRA
    pincel.beginPath();
    pincel.moveTo(50, 50);
    pincel.lineTo(50, 400);
    pincel.lineTo(400, 400);
    pincel.lineTo(50, 50);
    pincel.fill(); // Rellena la forma

    //ESCUADRA BLANCA
    pincel.beginPath(); // inicia un nuevo camino para dibujar
    pincel.fillStyle = "white"; // Rellena la forma  
    pincel.moveTo(100, 175);
    pincel.lineTo(100, 350);
    pincel.lineTo(275, 350);
    pincel.lineTo(100, 175);
    pincel.fill(); // rellena la forma cerrada con el color de relleno establecido previamente, blanco en este caso

</script>