Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            let canvas = document.getElementById("canvasId");
            let context = canvas.getContext("2d");
            let mouse;
            let shapesArray = [];
            let activeShape = -1;

            const handler = (evt) => {
                shapesArray[activeShape].x = evt.layerX - shapesArray[activeShape].width/2;
                shapesArray[activeShape].y = evt.layerY - shapesArray[activeShape].height/2;
                drawShapes();
                // console.log(evt);
            }

            canvas.addEventListener("click", (e) => {
                mouse = mousePlayer1(e);
                if(activeShape != -1){
                    canvas.removeEventListener('mousemove', handler);
                    activeShape = -1;
                } else {
                    shapesArray.forEach((item, i) => {
                        context.beginPath();
                        context.rect(item.x, item.y, item.width, item.height);
                        context.closePath();
                        if(context.isPointInPath(mouse.x, mouse.y)){
                            if(activeShape == -1){
                                activeShape = i;
                                canvas.addEventListener('mousemove', handler);
                            }
                        }
                    });
                }

            });


            let btn = document.querySelectorAll('#drawShape')[0];
            btn.addEventListener('click', (e) => {
                let x = document.querySelectorAll('#posX')[0].value;
                let y = document.querySelectorAll('#posY')[0].value;
                let width = document.querySelectorAll('#sizeX')[0].value;
                let height = document.querySelectorAll('#sizeY')[0].value;
                let color = colorPicker();
                let newShape = new Shape(x, y, width, height, color, 'inactive');
                shapesArray.push(newShape);
                drawShapes();
                console.log(shapesArray);

            });

            const drawShapes = () => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                for (let i = 0; i < shapesArray.length; i++) {
                    context.fillStyle = shapesArray[i].color;
                    context.fillRect(shapesArray[i].x,
                                     shapesArray[i].y,
                                     shapesArray[i].width,
                                     shapesArray[i].height);
                }
            }

        });

        class Shape{
            constructor(x, y, width, height, color, active){
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.color = color;
                this.active = active;
            }
        }

        const colorPicker = () => {
            let color = '#';
            let hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
            for (let i = 0; i < 6; i++) {
                color = color + hex[Math.floor(Math.random()*16)];
            }

            return color;
        }

        const mousePlayer1 = (e) => {
          return {
            x: e.layerX,
            y: e.layerY,
          }
        }

        </script>
    <style type="text/css">
    #canvasId{
        background: black;
    }
    </style>
</head>
<body class="p-2">
    <div class="container-fluid">
        <div class="row">
            <div class="col-auto">
                <canvas id="canvasId" class="d-block" width="800" height="600"></canvas>
            </div>
            <div class="col-3">

                <div class="form-check">
                    <div class="d-inline-block mx-4">
                        <input type="radio" id="shape1" name="shape" class="form-check-input" value="Rect" >
                        <label class="form-check-label" for="shape1">Четириъгълник</label>
                    </div>
                    <div class="d-inline-block mx-4">
                        <input type="radio" id="shape2" name="shape" class="form-check-input" value="Circle">
                        <label class="form-check-label" for="shape2">Окръжност</label>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label> Координат по X </label>
                    <input class="form-control" id="posX" value="100"></input>
                </div>
                <div class="form-group mb-3">
                    <label> Координат по Y </label>
                    <input class="form-control" id="posY" value="100"></input>
                </div>
                <div class="form-group mb-3">
                    <label> Широчина </label>
                    <input class="form-control" id="sizeX" value="200"></input>
                </div>
                <div class="form-group mb-3">
                    <label> Височина </label>
                    <input class="form-control" id="sizeY" value="20"></input>
                </div>
                <div class="form-group d-grid">
                    <input type="button" class="btn btn-info text-white" id="drawShape" value="Създай">
                </div>
            </div>
        </div>
    </div>
</body>
</html>