Пытаюсь создать камеру для моего холста 2d world

Question

Я создал мир холста и игроков, которые отображаются правильно. Теперь я должен создать что-то, что будет прокручивать мир, удерживая игрока в центре. Вот мои вещи для мира холста

var enemy = [];

function startGame() {
    myGameArea.start();
    myGamePiece = new component(20, 20, "blue", x["playerParty"]["location"]["x"], x["playerParty"]["location"]["y"]);
    for(i = 0; i < x["otherParties"].length; i++) {
      enemy.push(new component(20, 20, "red", x["otherParties"][i]["location"]["x"], x["otherParties"][i]["location"]["y"]))
    }
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = binaryMap[0].length * 50;
        this.canvas.height = binaryMap.length * 50;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
        })
    },
    clear : function() {
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y) {
    this.gamearea = myGameArea;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.color = color;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    this.updatePosition = function() {
        this.x += this.speedX;
        this.y += this.speedY;
    }
}

function isFighting(you, them) {
  if(you.x < them.x + them.width && you.x + you.width > them.x && you.y < them.y + them.height && you.y + you.height > them.y) {
    you.color = "blue"
    them.color = "purple"
  }
  else {
    you.color = "blue"
    them.color = "red"
  }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
    if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.speedX = -1; }
    if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.speedX = 1; }
    if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speedY = -1; }
    if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speedY = 1; }
    for(i = 0; i < enemy.length; i++) {
      isFighting(myGamePiece, enemy[i])
    }
    for(i = 0; i < enemy.length; i++) {
      enemy[i].update();
    }
    for(i of maptile) {
      i.update();
    }
    myGamePiece.updatePosition();
    myGamePiece.update();
}

И я попытался использовать это для камеры видового экрана, но это не сработало. Но я попытался использовать это в методе запуска, рисования мира и в методе обновления.

    screen      : [0,0],
    startTile   : [0,0],
    endTile     : [0,0],
    offset      : [0,0],
    update      : function(px, py) {
        this.offset[0] = Math.floor((this.screen[0]/2) - px);
        this.offset[1] = Math.floor((this.screen[1]/2) - py);

        var tile = [ Math.floor(px/tileW), Math.floor(py/tileH) ];

        this.startTile[0] = tile[0] - 1 - Math.ceil((this.screen[0]/2) / tileW);
        this.startTile[1] = tile[1] - 1 - Math.ceil((this.screen[1]/2) / tileH);

        if(this.startTile[0] < 0) { this.startTile[0] = 0; }
        if(this.startTile[1] < 0) { this.startTile[1] = 0; }

        this.endTile[0] = tile[0] + 1 + Math.ceil((this.screen[0]/2) / tileW);
        this.endTile[1] = tile[1] + 1 + Math.ceil((this.screen[1]/2) / tileH);

        if(this.endTile[0] >= mapW) { this.endTile[0] = mapW-1; }
        if(this.endTile[1] >= mapH) { this.endTile[1] = mapH-1; }
    }
};

viewport.screen = [document.getElementById('game').width,
        document.getElementById('game').height];

viewport.update(player.position[0] + (player.dimensions[0]/2),
        player.position[1] + (player.dimensions[1]/2));

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, viewport.screen[0], viewport.screen[1]);```