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";

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);

background.onLoad = function() {
    offsetCanvas.width = background.width / 2;
    offsetCanvas.height = background.height / 2;
}

//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 / 2) + ((mainCanvas.width / 2) - (indicator.size /2)) / 2;
    var oCenterY = (y / 2) + ((mainCanvas.height / 2) - (indicator.size /2)) / 2;
    offsetCanvasContext.fillRect(oCenterX, oCenterY, indicator.size / 2, indicator.size / 2);
}

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