JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="968" height="643" style="border;background:rgb(233,233,233)">
            O seu navegador não suporta o canvas
            </canvas>

JavaScript

var iw = 2000; //Image width
var ih = 643; //Image height
var sw = 968; //Canvas width
var sh = 643; //Canvas height
var cw = 80; //Character width
var ch = 80; //Character height
var speed = 10; //Character speed

var img = new Image(iw, ih);
var character = new Image(cw, ch);

img.src = "http://i.imgur.com/QnBufq4.jpg";
character.src = "http://i.stack.imgur.com/mc1P8.jpg";


var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 160};
var camera = {x: 0, y: 0}

function draw() {
 //Faz a esquerda da camera comecar meia tela antes do personagem, mas so se tiver imagem suficiente pra isso
 camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
 //Reseta as transformacoes do canvas
 ctx.setTransform(1,0,0,1,0,0);
 //Limpa o canvas
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 //Desloca o mundo inteiro, simulando uma camera
 ctx.translate(-camera.x, -camera.y);
 //Desenha o fundo
 ctx.drawImage(img, 0, 0, sw, sh, 0, 0, iw, ih);
 //Desenha o personagem
 ctx.drawImage(character, 10, 25, cw, ch, 0, 500, cw, ch);

 window.requestAnimationFrame(draw);
}

document.addEventListener('keydown', function(e) {
 var key = e.which || e.key || e.keyCode;
 switch(key) {
  case 37: pos.x-=speed; break;
  case 39: pos.x+=speed; break;
 }
 pos.x = Math.max(0, Math.min(iw - cw,pos.x));
});

window.requestAnimationFrame(draw);