Canvas Vertical Viewport

Question

Я хочу, чтобы вертикальная область просмотра только поднималась на холсте HTML5. Как я могу добиться этого с помощью JavaScript? Моя цель - заставить объект игрока и фон повышаться до тех пор, пока не будет достигнута высота игры.

Кроме того, всякий раз, когда пользователь нажимает ЛЮБУЮ КЛАВИШУ, пользователь автоматически начинает подниматься. В чем причина этого и каково решение?

Код:

script.js:

import { User } from "./user.js";
import { inputHandler } from "./input.js";

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");

const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 600;
const GAME_WIDTH = 800;
const GAME_HEIGHT = 2400;

let user = new User(GAME_WIDTH, GAME_HEIGHT, CANVAS_WIDTH, CANVAS_HEIGHT);
window.onload = new inputHandler();

let lastTime = 0;

function gameLoop(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;
    ctx.clearRect(0, 0, 800, 600);

    user.update(deltaTime);
    user.draw(ctx);

    requestAnimationFrame(gameLoop);
}
gameLoop();

export { user }; 

user.js:

class User {
    constructor(GAME_WIDTH, GAME_HEIGHT, CANVAS_WIDTH, CANVAS_HEIGHT) {
        this.GAME_WIDTH = GAME_WIDTH;
        this.GAME_HEIGHT = GAME_HEIGHT;
        this.CANVAS_WIDTH = CANVAS_WIDTH;
        this.CANVAS_HEIGHT = CANVAS_HEIGHT;
        this.cameraY = 0;
        this.cameraX = 0;
        this.xSpeed = 0;
        this.ySpeed = 0;
        this.position = {
                x: CANVAS_WIDTH/2,
                y: 570
            };
        this.width = 30;
        this.height = 20;
        }



        moveForward() {
            this.ySpeed = -5;
        }

        moveLeft() {
            this.xSpeed = -5;
        }

        moveBack() {
            this.ySpeed = 3;
        }

        moveRight() {
            this.xSpeed = 5;
        }

        yStop() {
            this.ySpeed = -5;
        }

        xStop() {
            this.xSpeed = 0;
        }

        draw(ctx) {
            var bgImage = new Image();
            bgImage.src = "bgImage.png";
            ctx.drawImage(bgImage, 0, -200);
            ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
            ctx.fillStyle = "#ff0000";        
        }

        update(deltaTime) {
            if(!deltaTime) return;


            this.position.x += this.xSpeed;
            this.position.y += this.ySpeed;

            if(this.position.x < 0) {
                this.position.x = 0;
            }
        if(this.position.x + this.width > this.CANVAS_WIDTH) { /* Prevents user from past the right */
            this.position.x = this.CANVAS_WIDTH - this.width;
        }

        if(this.position.y + this.height > this.CANVAS_HEIGHT) { /* Prevents user from going below the 
      canvas */
            this.position.y = this.CANVAS_HEIGHT - this.height;
        }

    }

}

export { User }; 

input.js:

import { user } from "./script.js"

class inputHandler {
    constructor() {

        document.addEventListener("keydown", function(event) {
            if (event.defaultPrevented) {
                return; // Do nothing if the event was already processed
                }
            switch(event.key) {
                case "w":
                user.moveForward();
                break;

                case "a":
                user.moveLeft();
                break;

                case "s":
                user.moveBack();
                break;

                case "d":
                user.moveRight();
                break;

                default: 
                return;
              }
              event.preventDefault();

        }, true)

        document.addEventListener("keyup", event => {

            var keyUpKey = event.key;

                if(keyUpKey == "w" || "W") {
                    user.yStop();
                }

                if(keyUpKey == "a" || "A") {
                    user.xStop();
                }

                if(keyUpKey == "s" || "S") {
                    user.yStop();
                }

                if(keyUpKey == "d" || "D") {
                    user.xStop();
                }
        })
    }

}
export { inputHandler };