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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <style>
        .container-fluid{
            margin:0px;
            padding:0px;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function(event){
            let canvas = document.getElementById("canvasId");
            let context = canvas.getContext("2d");
            let mouse;
            let shapes = [];

            class Shape{
                constructor(x, y, w, h, color){
                    this.x = x;
                    this.y = y;
                    this.w = w;
                    this.h = h;
                    this.color = color;
                }
            }
            const handler = (mouse) => {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.fillStyle = shapes[0].color;
                shapes[0].x = mouse.x - shapes[0].w/2;
                shapes[0].y = mouse.y - shapes[0].h/2
                context.fillRect(shapes[0].x, shapes[0].y, shapes[0].w, shapes[0].h);
            }
            let isOnPath = false;
            canvas.addEventListener("click", function(evt){
                mouse = mouse_player1(evt, canvas);
                if(!isOnPath){
                    for (iterator of shapes) {
                        let myPath = new Path2D();
                        context.beginPath();
                        myPath.rect(iterator.x, iterator.y, iterator.w, iterator.h);
                        context.closePath();
                        if(context.isPointInPath(myPath, mouse.x, mouse.y)){
                            isOnPath = true;
                            canvas.addEventListener('mousemove', handler);
                        }
                    }
                } else {
                    canvas.removeEventListener('mousemove', handler);
                    isOnPath = false;
                }
            });

            let btn = document.getElementById('drawShape');
            btn.addEventListener('click', () => {

                let myRectangle = new Shape(
                    document.getElementById('posX').value,
                    document.getElementById('posY').value,
                    document.getElementById('sizeX').value,
                    document.getElementById('sizeY').value,
                    'rgb('+ Math.floor(Math.random()*256) + ', ' +
                        Math.floor(Math.random()*256) + ', ' +
                        Math.floor(Math.random()*256) + ')'
                );

                context.fillStyle = myRectangle.color;
                context.fillRect(myRectangle.x, myRectangle.y, myRectangle.w, myRectangle.h);
                shapes.push(myRectangle);
            });


        });

        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 type="text/css">
    #canvasId{
        background: black;
    }
    </style>
</head>
<body class="">
    <div class="container-fluid">
        <div class="row">
            <div class="col-auto">
                <canvas id="canvasId" class="d-block" width="700" height="600"></canvas>
            </div>
            <div class="col-3">

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

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