in this code I've been trying to move a rectangle using the arrow keys on my keyboard. I've written the conditions based on [this tutorial](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls) but my project is slightly different so I changed the code but the object the problem still exist.

I have 2 event listeners for keys being pressed and not pressed and I used some flag variables to see the state of buttons and move the object based on it.

Sorry if my question is silly, I'm newbie with this area of programming and I've spent couple of hours on it but I couldn't solve the problem.

```
    <script>
            //canvas
            var canvas = document.getElementById("gameScreen");
            var ctx = canvas.getContext("2d");          
            const width = 1000;
            const height = 700;

            //user controllers
            var rightPressed = false;
            var leftPressed = false;
            var upPressed = false;
            var downPressed = false;

            //keydown handler
            document.addEventListener("keydown",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = true;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = true;
                }
                else if(e.key == "Right" || e.key == "ArrowRIght"){
                    rightPressed = true;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = true;
                }
            }, false);

            //keyup handler
            document.addEventListener("keyup",(e)=>{
                if(e.key == "Up" || e.key == "ArrowUp"){
                    upPressed = false;
                } 
                else if(e.key == "Down" || e.key == "ArrowDown"){
                    downPressed = false;
                }
                else if(e.key == "Right" || e.key == "ArrowRIght"){
                    rightPressed = false;
                }
                else if(e.key == "Left" || e.key == "ArrowLeft"){
                    leftPressed = false;
                }
            }, false);          

            // Player Object
            let Player = function(x,y){
                this.x = x;
                this.y = y; 
                this.width = 50;
                this.height = 50;

                this.getDirection = function(){
                    if(downPressed){
                        this.y -= 10;
                    }else if(upPressed){
                        this.y += 10;
                    }else if(rightPressed){
                        this.x += 10;
                    }else if(leftPressed){
                        this.x -= 10;
                    }
                }

                this.update = function(){
                    this.getDirection();
                    this.draw();

                };

                this.draw = function(){
                    ctx.clearRect(0,0,width,height);
                    ctx.fillRect(this.x,this.y,this.width,this.height);
                    ctx.fill();
                };
            }

            let player = new Player(200,200)            
            let callback = player.update();

            requestAnimationFrame(callback)

        </script>

```