Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () =>{
            let canvas = document.getElementById('canvasId');
            let context = canvas.getContext("2d");
            let shapes = [];

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

                let radius = Math.floor(Math.random()*51+50);
                let color = 'rgb(' +
                    Math.floor(Math.random()*(255-50+1) + 50) + ', ' +
                    Math.floor(Math.random()*(255-50+1) + 50) + ', ' +
                    Math.floor(Math.random()*(255-50+1) + 50) + ')';

                let mouse = mousePlayer1(e);
                context.fillStyle = color;
                context.beginPath();
                context.arc(mouse.x, mouse.y, radius, 0, 2*Math.PI);
                context.closePath();
                context.fill();
                shapes.push(new Shape(mouse.x, mouse.y, radius, color));
            });

            let btn = document.querySelectorAll('[type=button]')[0];
            btn.addEventListener('click', (e) => {
                let pole = document.querySelectorAll('#radius')[0].value;

                context.clearRect(0, 0, canvas.width, canvas.height);
                shapes.forEach(item => {
                   context.fillStyle = item.color;
                    context.beginPath();
                    context.arc(item.x, item.y, pole, 0, 2*Math.PI);
                    context.closePath();
                    context.fill();
                });
            });


            document.addEventListener('keyup', (e) => {
                if(e.code == 'Space'){
                   shapes.forEach(item => {
                    context.fillStyle = 'green';
                        context.beginPath();
                        context.arc(item.x, item.y, item.radius, 0, 2*Math.PI);
                        context.closePath();
                        context.fill();
                    });
                }
            });
        });

        class Shape{
            constructor(x, y, radius, color){
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
            }
        }

        const mousePlayer1 = (e) => {
            return {
                x: e.layerX,
                y: e.layerY,
            }
        }
    </script>
    <style>
        canvas{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas width="800" height="800" id="canvasId"></canvas>
    <input type="text" id="radius">
    <input type="button" value="Change radius">
</body>
</html>