Making a sprite move with arrow key commands canvas javascript

Question

So for this project I need to have a Sprite be able to move with left and right arrow key events on Canvas. I've seen a bunch of tutorial videos and posts all telling me to do different things plus the things my professor has been showing us. I'm just really confused on how to make a sprite move. I'm using sublime to write my code but here's a jsfiddle so you all can see it: https://jsfiddle.net/n1v0w8kh/

//256 x 384

//global variables
var canvas;

var ctx;

var image;

var imageWidth;

var imageHeight;

var counterRight = 0;

var counterLeft = 0;

var imageSx;

var imageSy;

var frameWidth;

var frameHeight;

var frameIndex;

var numberOfFrames;

var image_X = 215;

var image_Y = 100;

var keydown;

var videoLeft;

var videoRight;

//displays the neutral start image
function animate() {

    frameIndex = 0;
    numberOfFrames = 4;
    imageSx = frameIndex * imageWidth;
    //imageSy = frameIndex * image.height;
    ctx.clearRect(image_X, image_Y, frameWidth, frameHeight);
    ctx.drawImage(image, imageSx, 0, frameWidth, frameHeight, image_X,      image_Y, frameWidth, frameHeight);

    frameIndex++;
    if (frameIndex >= numberOfFrames)
        frameIndex = 0;


}

//handles the keyboard events
/*function onKeyDown(event) {
    //console.log(event.keyCode);
    if (event.keyCode == 39) {
        image_X += 5;
        if (image_X > 440) {
            image_X = 440;
            rightVideo();
            //alert("border hit");
        }
        image = new Image();
        image.onload = function() {
            frameHeight = image.height / 4;
            frameIndex = 0;
            imageSx = frameIndex * image.width;
            imageSy = frameIndex * image.height;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(image, counterRight * imageSx, imageSy, frameWidth, frameHeight, image_X, image_Y, frameWidth, frameHeight);
        };
        counterRight += 1;
        if (counterRight >= 11) {
            counterRight = 8;
        }
        image.src = "../images/cat_man.png";
    }
    if (event.keyCode == 37) {
        image_X -= 5;
        if (image_X < 0) {
            image_X = 0;
            leftVideo();
        }
        counterLeft += 1;
        if (counterLeft >= 7) {
            counterLeft = 4;
        }
        imageSx = (imageWidth / 4) * counterLeft;
        imageSy = imageHeight / 4;
        ctx.clearRect(image_X, image_Y, frameWidth, frameHeight);
        ctx.drawImage(image, imageSx, imageSy, frameWidth, frameHeight, image_X, image_Y, frameWidth, frameHeight);

    }


}*/

//handles the left video
function leftVideo() {
    alert("leftVideo function");
}

//handles the right video
function rightVideo() {
    alert("rightVideo function");
}

//Updates the current time
function updateDateTime() {
    var date = new Date();
    //console.log(date);
    var today = document.getElementById("time");
    today.innerHTML = date.toString();
}

function main() {
    setInterval(updateDateTime, 500);


    //document.onkeydown = onKeyDown;
    //document.onkeyup = animate;
    //videoRight = document.getElementById("right").addEventListener("play", rightVideo);
    //videoLeft = document.getElementById("left").addEventListener("play", leftVideo);

}

window.onload = function() {
    main();
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    image = new Image();
    image.onload = function() {
        imageWidth = this.width;
        imageHeight = this.height;
        frameWidth = image.width / 4;
        frameHeight = image.height / 4;
        //animate();
        setInterval(animate, 100);
    };
    image.src = "../images/cat_man.png";
};

here's the source of the sprite sheet file I used http://orig13.deviantart.net/cbc5/f/2013/077/5/e/_animal_crossing__punchy_rpg_maker_xp_spritesheet_by_ineonfox-d5yieuw.png

I hope you guys can get the file to work since I couldn't Anyway I commented out one of the functions because I wanted to first figure out how to loop through a sprite sheet that had multiple rows and columns. All the examples I've found have been with single row sprite sheets. I think once I can get that down it should be easy to get it to work with the arrow keys. If you wonderful people see anyway I can optimize code please let me know, I am always looking to shorten and condense my code to make it simpler. Thanks for any help!!