JSFiddle - React, Tailwind, and code Playground

HTML

<p>Main Canvas</p>
<canvas id="main-canvas" width=256 height=128 title="main-canvas"></canvas>
<p>Offset Canvas</p>
<canvas id="offset-canvas" width="512" height=256 title="offset-canvas"></canvas>

CSS

#main-canvas {
  border: 1px solid red;
}

#offset-canvas {
  border: 1px solid blue;
}

JavaScript

var mainCanvas = document.getElementById("main-canvas");
var mainCanvasContext = mainCanvas.getContext("2d");

var offsetCanvas = document.getElementById("offset-canvas");
var offsetCanvasContext = offsetCanvas.getContext("2d");

var background = new Image();
background.src = "http://pixeljoint.com/files/icons/full/map__r1470206141.png";

offsetCanvas.width = background.width;
offsetCanvas.height = background.height;

var indicator = {};
indicator.size = 16;
indicator.x = (mainCanvas.width / 2) - (indicator.size / 2);
indicator.y = (mainCanvas.height / 2) - (indicator.size / 2);
indicator.speed = 16;

//Preload dos canvas antes de comecar a mover
redraw(indicator.x, indicator.y);

//Gerencia os eventos de movimento com o teclado
document.addEventListener('keydown', (event) => {
  if (event.keyCode == 37) {
    //esquerda
    indicator.x -= indicator.speed;
  } else if (event.keyCode == 38) {
    //cima
    indicator.y -= indicator.speed;
  } else if (event.keyCode == 39) {
    // direita
    indicator.x += indicator.speed;
  } else if (event.keyCode == 40) {
    //baixo
    indicator.y += indicator.speed;
  }

  redraw(indicator.x, indicator.y);
});

function drawIndicator(x, y) {
  //Desenha o indicador sempre no meio da tela
  var mCenterX = (mainCanvas.width / 2) - (indicator.size / 2);
  var mCenterY = (mainCanvas.height / 2) - (indicator.size / 2);
  mainCanvasContext.fillRect(mCenterX, mCenterY, indicator.size, indicator.size);

  var oCenterX = x + (mainCanvas.width / 2) - (indicator.size /2);
  var oCenterY = y + (mainCanvas.height / 2) - (indicator.size /2);
  offsetCanvasContext.fillRect(oCenterX, oCenterY, indicator.size, indicator.size);
}

function redraw(x, y) {
  //Limpa o contexto de desenho dos dois canvas
  mainCanvasContext.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
  offsetCanvasContext.clearRect(0, 0, offsetCanvas.width, offsetCanvas.height);

  //Desenha o mapa
  mainCanvasContext.drawImage(background, x, y, mainCanvas.width,...