JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="foo" height="600" width="600"></canvas>
<div id="log"></div>
<script type="text/javascript">
    main();
</script>

CSS

canvas{
    border:1px solid blue;
}

JavaScript

"use strict";
var cvs,
    ctx,
    imagex=100,
    imagey=100,
    mov={'x+':0,'x-':0,'y+':0,'y-':0};
function get(thing,key){
    for(var i in window[thing]){
        if(window[thing][i].indexOf(key)!==-1){return i;}
    }
    return false;
}
function changeMov(key,val){
    switch(key){
        case 68:case 39:
            mov['x+']=val;break;
        case 65:case 37:
            mov['x-']=val;break;
        case 87:case 38:
            mov['y-']=val;break;
        case 83:case 40:
            mov['y+']=val;break;
        default:return false;
    }
}

function keydown_callback(ev){
    var key=ev.which||ev.keyCode;
    if(changeMov(key,1)===false){return;}
    draw();
    ev.preventDefault();
    return false;
}
function keyup_callback(ev){
    var key=ev.which||ev.keyCode;
     if(changeMov(key,0)===false){return;}
}
function draw(){
    imagex+=5*(mov['x+']-mov['x-']);
    imagey+=5*(mov['y+']-mov['y-']);
    ctx.clearRect(0,0,600,600);
    var background = new Image();
    background.src="http://images1.videolan.org/images/largeVLC.png";
    ctx.drawImage(background, 0, 0, 100, 100);
    var img = new Image();
    img.src="http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png";
    ctx.drawImage(img,imagex,imagey,128,256);
}

function main(){
    var body = document.body;
    body.addEventListener("keydown",keydown_callback);
    body.addEventListener("keyup",keyup_callback);
    cvs = document.getElementById("foo");
    ctx = cvs.getContext("2d");
    draw();
}