Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>

        document.addEventListener("DOMContentLoaded", function(event){
            var canvas = document.getElementById("canvasId");
            var canvasId = canvas.getContext("2d");

            var $x = 0;
            var $y = 0;
            var $width = 0;
            var $height = 0;
            var $color = 0;
            var $shape = 0;
            var $pcCoords = [];
            var $counter = 0;
            var $item = 0;

            canvas.addEventListener("click", function(evt){
                mouse = mouse_player1(evt);
                if($counter %2 == 0){
                    for (var i = 0; i < $pcCoords.length; i++) {
                        canvasId.beginPath();
                        if($pcCoords[i].shape == "Rect"){
                            canvasId.rect($pcCoords[i].x, $pcCoords[i].y, $pcCoords[i].width, $pcCoords[i].height);
                        } else if($pcCoords[i].shape == "Circle"){
                            canvasId.arc($pcCoords[i].x, $pcCoords[i].y, $pcCoords[i].width, 0, Math.PI*2);
                        }
                        canvasId.closePath();

                        if(canvasId.isPointInPath(mouse.cursor_x, mouse.cursor_y)){
                            $item = i;
                            $counter++;
                            canvas.addEventListener("mousemove", handler);
                        }
                        if($counter%2==0){
                            $counter--;
                        }
                    }
                } else {
                    canvas.removeEventListener("mousemove", handler);
                        $counter++;
                }

                console.log($counter);
            });

            var btn = document.getElementById("drawShape");
            btn.addEventListener("click", function(){
                $x = parseInt(document.getElementById("posX").value);
                $y = parseInt(document.getElementById("posY").value);
                $width = parseInt(document.getElementById("sizeX").value);
                $height = parseInt(document.getElementById("sizeY").value);

                var shape = document.getElementsByName("shape");
                if(shape[0].checked) {
                    $shape = shape[0].value;
                } else if(shape[1].checked){
                    $shape = shape[1].value;
                } else {
                    $shape = Math.floor(Math.random()*2) == 1 ? "Rect" : "Circle";
                }

                $color = "rgb(" +
                Math.floor(Math.random()*256) + ", " +
                Math.floor(Math.random()*256) + ", " +
                Math.floor(Math.random()*256) + ")";
                $pcCoords.push({"x": $x,
                                "y": $y,
                                "width": $width,
                                "height": $height,
                                "color" : $color,
                                "shape" : $shape});
                draw();
            });

            function draw(){
                canvasId.clearRect(0,0, canvas.width, canvas.height);
                for (var i = 0; i < $pcCoords.length; i++) {
                    canvasId.fillStyle = $pcCoords[i].color;
                    if($pcCoords[i].shape == "Circle"){
                        canvasId.beginPath();
                        canvasId.arc($pcCoords[i].x,
                                     $pcCoords[i].y,
                                     $pcCoords[i].width, 0, Math.PI*2);
                        canvasId.fill();
                    } else {
                        canvasId.fillRect($pcCoords[i].x,
                                          $pcCoords[i].y,
                                          $pcCoords[i].width,
                                          $pcCoords[i].height);
                    }

                }

            }

            function mouse_player1(evt){
                var rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
                var mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
                var mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
                return {
                    cursor_x: mouseX,
                    cursor_y: mouseY,
                } // фунцкията връша два параметъра, cursor_x и cursor_y
            }

            canvas.addEventListener("mousemove", function(evt){
                mouse = mouse_player1(evt);

            });

            function handler(){
                if($pcCoords[$item].shape == "Rect"){
                    $pcCoords[$item].x = mouse.cursor_x - $pcCoords[$item].width/2;
                    $pcCoords[$item].y = mouse.cursor_y - $pcCoords[$item].height/2;
                } else if($pcCoords[$item].shape == "Circle"){
                    $pcCoords[$item].x = mouse.cursor_x;
                    $pcCoords[$item].y = mouse.cursor_y;
                }
                draw();
            }


        });

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