Упражнение 5 Банков Canvas Решения на задачи и примерен вариант (2)

<!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 context = canvas.getContext("2d");
        let mouse;

        canvas.addEventListener('click', (e) => {
            mouse = mousePlayer1(e);
            let pointA = new Point(mouse.x, mouse.y);
            let pointB = new Point(canvas.width - mouse.x, mouse.y);
            let pointC = new Point(canvas.width - mouse.x, canvas.height - mouse.y);
            let pointD = new Point(mouse.x, canvas.height - mouse.y);

            context.beginPath();
            context.strokeStyle = 'red';
            context.moveTo(pointA.x, pointA.y);
            context.lineTo(pointC.x, pointC.y);
            context.stroke();
            context.closePath();

            context.beginPath();
            context.strokeStyle = 'red';
            context.moveTo(pointB.x, pointB.y);
            context.lineTo(pointD.x, pointD.y);
            context.stroke();
            context.closePath();
        });

    });

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

    const mousePlayer1 = (e) => {
      return {
        x: e.layerX,
        y: e.layerY,
      }
    }
</script>
<style>
    canvas{
        background-color: black;
    }
</style>
</head>
<body>
  <canvas width="800" height="800" id="canvasId"></canvas>
</body>
</html>