Tilemap model doubts (Updated)

Authoring Twine
, ,
1

I created a new tilemap model, a simpler model to fit my project’s navigation system.

StoryCaption

<canvas id="myMap"></canvas>

CSS

#myMap {
  border: 1px solid black;
}

body {
  margin: 0;
}

Javascript (Prototype, I will still adapt this for the sugarcube after it is complete)

// Base canvas
var canvas = document.getElementById('myMap');

canvas.width = window.innerWidth;
canvas.height = 300;

// The map
var ctx = canvas.getContext('2d');

const gameMap1 = {
    tiles : [
      0,0,0,0,0,0,0,0,
      0,1,1,1,0,0,0,0,
      0,1,1,1,0,1,0,0,
      0,1,1,1,0,1,0,0,
      0,0,1,0,1,1,1,0,
      0,0,1,1,1,0,0,0,
      1,1,1,0,0,0,0,0,
    ],
    weight : 8,
    height : 8
}
var mapW = gameMap1.weight, mapH = gameMap1.height;

var actualMap = gameMap1;

ctx.fillStyle = "rgb(86, 88, 89)";
ctx.fillRect(0, 0, canvas.width, canvas.height);

var tileW = 40, tileH = 40;

var defaultRoomIcon = new Image(tileW, tileH);
defaultRoomIcon.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='room_default' width='40' height='40' version='1.1'%3E%3Cstyle id='style1422'%3E%23room-bg%7Bfill:%2377797a;fill-opacity:1;stroke:none%7D%3C/style%3E%3Cdefs id='defs853'%3E%3ClinearGradient id='linearGradient2065' x1='39' x2='1' y1='39' y2='1' gradientUnits='userSpaceOnUse'%3E%3Cstop id='stop2061' offset='0' stop-color='%23444' stop-opacity='1'/%3E%3Cstop id='stop2063' offset='1' stop-color='%23ccc' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='layer1'%3E%3Cpath id='room-bg' d='M5 2C3 2 2 3 2 5v30c0 2 1 3 3 3h30c2 0 3-1 3-3V5c0-2-1-3-3-3z'/%3E%3Cpath id='room-border' fill='url(%23linearGradient2065)' fill-opacity='1' stroke='none' d='M4 1C2 1 1 2 1 4v32c0 2 1 3 3 3h32c2 0 3-1 3-3V4c0-2-1-3-3-3zM2 5c0-2 1-3 3-3h30c2 0 3 1 3 3v30c0 2-1 3-3 3H5c-2 0-3-1-3-3z'/%3E%3C/g%3E%3C/svg%3E";

var playerIcon = new Image();
playerIcon.src = "https://i.imgur.com/QWQhkA0.png"; 

var playerLoc = {
  x : 1,
  y : 1
}

for (var y = 0; y < mapH; y++) {
   for(var x = 0; x < mapW; x++) {
       var ID = actualMap.tiles[ (y * mapW) + x ];
       switch(ID) {
          case 0:
             break;
          case 1:
             ctx.drawImage(defaultRoomIcon, x * tileW, y * tileH, tileW, tileH);
       }
       if (x === playerLoc.x && y === playerLoc.y) {
          ctx.drawImage(playerIcon, x * tileW, y * tileH, tileW, tileH);
       }
   }
}

I discovered a simple way to position the player, now I would like to know how to keep the camera always centered on the player icon, as the maps can be much larger than the camera space.

Twine Version: Twine 2
Story Format: Sugarcube 2