Moving content of canvas with a specific framerate

Question

So I have this sprite animation which goes fine when it's not in movement (I need it to go on 20 fps max because if not the animation would be too fast), but when I try to move it across the screen, the movement looks really choppy. Any ideas on how to make the movement smoothly? Increase the framerate works, but I'd like to see if there is another option aside of that.

var canvasA = document.createElement("canvas");
var canvasB = document.createElement("canvas");

var contextA = canvasA.getContext("2d");
var contextB = canvasB.getContext("2d");

canvasA.style.position = "absolute";
canvasB.style.position = "absolute";

var xpos = 0;
var ypos = 0;
var index = 0;
var frameSizeX = 140;
var frameSizeY = 395;
var numFrames = 20;
var drawing_character = false;
var xPosition = 0;
var now, then, elapsed, startTime, fps, fpsInterval;
var fpscounter = setInterval(updatefps, 1000);
var forw = true;
var cfps = 0;

// Pictures
var background = new Image();
background.src = "http://i.imgur.com/3FDB45h.png";

var character = new Image();
character.src = "http://i.imgur.com/tziJajG.png";

function redraw() {
    contextB.clearRect(0, 0, canvasB.width, canvasB.height);
    contextB.drawImage(background, 0, 0);
}

function drawchar() { // Input= fps max
    requestAnimationFrame(drawchar);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        contextA.clearRect(0, 0, 800, 600);  

        contextA.drawImage(character,                           
        xpos,
        ypos,
        frameSizeX,
        frameSizeY,
        xPosition,
        0,
        frameSizeX,
        frameSizeY);

        xpos += frameSizeX;
        index += 1;
        if (index >= numFrames) {
            xpos = 0;
            ypos = 0;
            index = 0;
        } else if (xpos + frameSizeX > character.width) {
            xpos = 0;
            ypos += frameSizeY;
        }

        cfps++;
    }
}

function updatefps() {
    document.getElementById("fps").innerHTML = "FPS: " + cfps;
    cfps = 0;
}

function aqui() {
    prepareCanvas();
    setInterval(redraw, 1000/60);
    animarchar(20);

    setInterval(move, 1);
}

function move() {
    if (forw === true) {
        xPosition += 1;
        if (xPosition === 300){
            forw = false;}
    } else {
        xPosition -= 1;
        if (xPosition === 0){
            forw = true;}
    }
}

function prepareCanvas() {
    canvasB.width = 800;
    canvasB.height = 600;
    canvasA.width = canvasB.width;
    canvasA.height = canvasB.height;
    //document.body.appendChild(canvasB);
    document.body.appendChild(canvasA);
}

function animarchar(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    drawchar();
}

window.onload = function () {
    aqui();
};

Here is a jsFiddle: https://jsfiddle.net/qb171ghf/