Edit in JSFiddle

// Nuestras variables
var canvas, ctx, img, x, y, step, direction;

canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
img = document.getElementById('img');

// La posición x inicial, variara con cada paso
x = 0;
// La posición y inicial, quedará estatica
y = 25;

// Numerador de paso, lo usaremos para saber que frame dibujar
step = 0;

// Direccion, 1 derecha, -1 izquierda
direction = 1;

setInterval(function() {
    // Borramos lo dibujado
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Dibujamos el frame adecuado en la posicion correspondiente
    ctx.drawImage(
        // Imagen
        img,
        // Source x
        (step++ % 4) * 32, // Avance sobre el eje x
        // Source y
        [52, 0, 104][direction + 1], // Selecciona el frame adecuado
        // Source width
        32,
        // Source height
        52,
        // Dest x
        x,
        // Dest y
        y,
        // Dest width
        32,
        // Dest height
        52
    );
           
    // Avance, indistinto de la direccion
    x += 5 * direction;
    
    // Si toca un limite, cambiamos la dirección
    if (x >= canvas.width - 32 || x <= 0) {
        direction = -direction;
    }
}, 1000 / 12); // Aproximadamente 12 frames por segundo
<canvas id="canvas" width="300" height="100"></canvas>
<br />
<img id="img" src="data:image/png;base64,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"/>
img {
    display: none;
}
canvas {
    background-color: #eee;
    
    background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);

    background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);    
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
        linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    
    background-size:60px 60px;
    background-position:0 0, 30px 30px
}