Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            overflow: hidden;
            margin: 0px;
        }
    </style>
</head>

<body>


    <canvas></canvas>

    <script>

        class Canvas {
            constructor(canvas) {
                this.canvas = canvas;
                this.ctx = canvas.getContext('2d');

                this.shapes = [];
                console.log(this.shapes);
            }

            addShape(shape) {
                this.shapes.push(shape);
            }

            removeShape(shape) {
                this.shapes = this.shapes.filter(s => s !== shape);
            }

            clear() {
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            }

            draw() {
                this.clear();
                this.shapes.forEach(shape => shape.draw(this.ctx));
            }

            resize() {
                this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;
            }
        }

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

                // velocity cause y not after all awhitehatcoder go BRRR kdfaijsdfkla
                this.dx = 5;
                this.dy = 5;
            }

            draw(ctx) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
                // im goin crazy cause i am smadfsd
                this.update();
            }

            update() {
                window.addEventListener('keydown', (e) => {
                    if (event.defaultPrevented) {
                        return; // Do nothing if the event was already processed cause idk what im doing HA
                    }
                    switch (e.key) {
                        case 'ArrowLeft':
                            this.x -= this.dx;
                            console.log("balls");
                            break;
                        case 'ArrowRight':
                            this.x += this.dx;
                            console.log("balls");
                            break;
                        case 'ArrowUp':
                            this.y -= this.dy;
                            break;
                        case 'ArrowDown':
                            this.y += this.dy;
                            break;
                        default:
                            return;
                    }

                    event.preventDefault();
                });
            }
        }

        const player1 = new Player(500, 500, 50, 'gold')

        const canvas = new Canvas(document.querySelector('canvas'));
        canvas.resize();
        canvas.addShape(player1);

        function animate() {
            canvas.draw();
            requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>

</html>