Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(){
        let canvas = document.getElementById('canvasId');
        let canvasId = canvas.getContext("2d");
        let mouse;
        let points = [];

        canvas.addEventListener('click', function(evt){
            mouse = mouse_player1(evt, canvas);
            let newPointA = new Point(mouse.x, mouse.y);
            points.push(newPointA);
            let newPointB = new Point(canvas.width - mouse.x, mouse.y);
            points.push(newPointB);
            let newPointC = new Point(canvas.width - mouse.x, canvas.height - mouse.y);
            points.push(newPointC);
            let newPointD = new Point(mouse.x, canvas.height - mouse.y);
            points.push(newPointD);
            canvasId.beginPath();
            canvasId.strokeStyle = 'red';
            canvasId.moveTo(newPointA.x, newPointA.y);
            canvasId.lineTo(newPointC.x, newPointC.y);
            canvasId.stroke();
            canvasId.closePath();

            canvasId.beginPath();
            canvasId.strokeStyle = 'red';
            canvasId.moveTo(newPointB.x, newPointB.y);
            canvasId.lineTo(newPointD.x, newPointD.y);
            canvasId.stroke();
            canvasId.closePath();

        });

    });

    class Point{
        constructor(x, y){
            this.x = x;
            this.y = y;
        }
    }

    const mouse_player1 = (evt, canvas) => {
        var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
        var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
        var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
        return {
            x: mouseX,
            y: mouseY,
        } // фунцкията връша два параметъра, x и y
    }
</script>
<style>
    canvas{
        background-color: black;
    }
</style>
</head>
<body style="margin:0px;">
  <canvas width="800" height="800" id="canvasId"></canvas>
</body>
</html>