JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="320" height="240" style="border:1px solid #000000;" />    


<img id="testpic" src="http://cdn2.hubspot.net/hub/53/file-385992610-jpg/html-code.jpg" class="hidden" />

CSS

.hidden {
    display: none;
}

JavaScript

var xval = 10;
var yval = 10;
var speed = 50; // make this number smaller to move faster
var leftPointer, rightPointer;
var c, ctx, img;

function load_image() {
    c = document.getElementById("myCanvas");
    ctx = c.getContext("2d");
    img = document.getElementById("testpic");
    ctx.drawImage(img,xval,yval);
}
load_image();

document.addEventListener('keydown', function(event) {
    console.log(event.keyCode);
    if (event.keyCode == 37) {
        // CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE.
        if(!leftPointer) {
            leftPointer = setInterval(function () {
                xval = xval - 1;
                ctx.clearRect(0, 0, c.width, c.height);
                ctx.drawImage(img,xval,yval);
            }, speed)
        }
    }
    else if (event.keyCode == 39) {
        // CODE THAT STARTS RIGHT IMAGE MOVEMENT GOES HERE.
        if(!rightPointer) {
            rightPointer = setInterval(function () {
                xval = xval + 1;
                ctx.clearRect(0, 0, c.width, c.height);
                ctx.drawImage(img,xval,yval);
            }, speed)
        }
    }
}, true);

document.addEventListener('keyup', function(event) {
    if (event.keyCode == 37) {
        // CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE.
        clearInterval(leftPointer);
    }
    else if (event.keyCode == 39) {
        // CODE THAT STOPS RIGHT IMAGE MOVEMENT GOES HERE.
        clearInterval(rightPointer);
    }
}, true);