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 ctx = canvas.getContext("2d");
            let mouse;
            let shapes = [];
            let btn = document.querySelector('.btn-info');
            let x = document.querySelector('#posX');
            let y = document.querySelector('#posY');
            let w = document.querySelector('#sizeX');
            let h = document.querySelector('#sizeY');

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

            const moveShape = (evt) => {
                let active = 0;
                shapes.forEach((item, index) => {
                    if(item.isActive == true){
                        active = index;
                    }
                });
                shapes[active].x = evt.offsetX - shapes[active].w/2;
                shapes[active].y = evt.offsetY - shapes[active].h/2;
                drawShapes();
            }

            btn.addEventListener('click', (e) => {
                let colorShape = rndColor();
                shapes.push({
                    x: x.value,
                    y: y.value,
                    w: w.value,
                    h: h.value,
                    color: colorShape,
                    isActive: false
                });
                ctx.fillStyle = colorShape;
                ctx.fillRect(x.value, y.value, w.value, h.value);
            });

            canvas.addEventListener("click", (e) => {
                mouse = mousePlayer1(e);

                for(let i = 0; i < shapes.length; i++){
                    ctx.beginPath();
                    ctx.rect(shapes[i].x, shapes[i].y, shapes[i].w, shapes[i].h);
                    ctx.closePath();
                    if(ctx.isPointInPath(mouse.x, mouse.y)){
                        if(shapes[i].isActive == false){
                            canvas.addEventListener('mousemove', moveShape);
                            shapes[i].isActive = true;
                        } else if(shapes[i].isActive == true){
                            canvas.removeEventListener('mousemove', moveShape);
                            shapes[i].isActive = false;
                        }
                    } else {
                        console.log('clicked outside');
                    }
                }
            });
        });

        const mousePlayer1 = (e) => {
          return {
            x: e.offsetX,
            y: e.offsetY,
          }
        }

        const rndColor = () => {
            return '#' + Math.floor(Math.random()*256*256*256).toString(16);
        }

        </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="80"></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>