Как заставить контекст холста следовать за игроком?

Большинство реализаций 2D-сцен в играх работают с родительским/дочерним деревом, где сцена является верхним родителем (родительское положение объекта просто делает его зависимым от положения другого объекта).

Получив это, вы можете легко перемещать область просмотра, добавляя каждый объект к одному и тому же родителю (например, сцене), содержащему все ваши объекты, и перемещая этот родитель для имитации камеры.

Вот некоторый псевдокод, чтобы получить представление о такой системе.

//Pseudo code, don't simply copy-paste it
// Make a class from which all the objects in the game will inherit; it'll take care of managing the position.

class GameObject {
    position: {x: 0, y: 0}
    parent: null;
    children: [];
    function setPosition(pX, pY) { //Sets the position within the parent
        position.x = pX;
        position.y = pY;
    }
    //This is the core of our parent/child tree
    function addChild(pGameObject) {
        children.push(pGameObject);
        pGameObject.parent = this;
    }
    function removeChild() //take care of updating the parent/children vars

    function toGlobalCoordinates() { //Allows us to get the global coordinates (= coordinates on the canvas)
       let lParent = this.parent;
       let globalPos = {x: 0, y: 0}
       //Goes up the parents tree, breaks when there's no more parent thanks to the default: parent = null in the class
       while(lParent) {
           globalPos.x += lParent.position.x;
           globalPos.y += lParent.position.y;
           lParent = lParent.parent;
       }
       globalPos.x += this.position.x;
       globalPos.y += this.position.y;
       return globalPos;
    }
 
    function draw(pCtx) { //We pass the canvas ctx to be able to draw on it
        //Use the global position to draw your object
        let drawingPos = this.toGlobalCoordinates();
        pCtx.fillRect(drawingPos.x, drawingPos.y, 100, 100);
    }
}

Затем у нас есть другие классы, такие как Player, и мы должны позаботиться о рендеринге.

//extends from GameObject to benefit from the position and its methods
class Player extends GameObject {
    methods() ... //Implement methods specific to the player
}

//Use the scene as the base gameobject (our top parent)
let scene  = new GameObject();
let player = new Player();
let stationnaryObject1 = new GameObject()

scene.addChild(player)
scene.addChild(stationnaryObject1)

//The function called on requestAnimationFrame
update() {
   //clearRect to clean the canvas then

   //On key press, move the player, move the scene in the opposite direction to keep the keep focus on the player
   if (keypress) {
     player.setPosition(player.position.x + newX, player.position.x + newY)
     scene.setPosition(scene.position.x - newX, scene.position.x - newY)
   }
   
   //Draw the objects with their new position
   scene.draw(ctx);
   player.draw(ctx);
}

Это более или менее базовый способ сделать камеру (т.е. переместить область просмотра в игровом мире).

Вам следует взглянуть на PixiJS, если вы ищете очень надежный способ справиться с этим и многим другим. Это очень мощная и простая в освоении JS-библиотека для обработки 2D-отображения на WebGL и холсте (больше не нужно рисовать самостоятельно!)

Чтобы узнать больше о графе/дереве сцены, о котором я говорил: https://pixijs.io/guides/basics/scene-graph.html такое же дерево использовалось, например, во Flash-играх.

TLDR: Создание камеры — это изменение позиции, к которой привязаны позиции всех объектов.

Надеюсь, вы получите удовольствие от разработки игр!