Untitled

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

        let shapes = [];
        for(let i = 0; i < 10; i++){
            let w = Math.floor(Math.random()*(100-50 + 1) + 50);
            let h = Math.floor(Math.random()*(100-50 + 1) + 50);
            let color = colorPicker();
            let x = Math.floor(Math.random()*700);
            let y = Math.floor(Math.random()*700);
            canvasId.fillStyle = color;
            canvasId.fillRect(x, y, w, h);
            shapes.push({x: x, y: y, width: w, height: h, color: color});
        }

        canvas.addEventListener('click', (e) => {

            let activeColor = undefined;
            for(let i = 0; i < shapes.length; i++){
                canvasId.beginPath();
                canvasId.rect(shapes[i].x, shapes[i].y, shapes[i].width, shapes[i].height);
                canvasId.closePath();
                if(canvasId.isPointInPath(e.offsetX, e.offsetY)){
                    activeColor = shapes[i].color;
                    console.log('works');
                }
            }

            if(activeColor == undefined){
                canvasId.clearRect(0, 0, canvas.width, canvas.height);
                for(let i = 0; i < shapes.length; i++){
                    let x = Math.floor(Math.random()*700);
                    let y = Math.floor(Math.random()*700);
                    canvasId.fillStyle = activeColor == undefined ? shapes[i].color : activeColor;
                    canvasId.fillRect(x, y, shapes[i].width, shapes[i].height);
                    shapes[i].x = x;
                    shapes[i].y = y;
                }
            } else {
                canvasId.clearRect(0, 0, canvas.width, canvas.height);
                for(let i = 0; i < shapes.length; i++){
                    canvasId.fillStyle = activeColor == undefined ? shapes[i].color : activeColor;
                    canvasId.fillRect(shapes[i].x, shapes[i].y, shapes[i].width, shapes[i].height);

                }
            }
        });
    });

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

    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>
    canvas{
        background-color: black;
    }
</style>
</head>
<body>
  <canvas width="800" height="800" id="canvasId"></canvas>
</body>
</html>