(function() {

  var canvas = document.getElementById('canvas');

  var context = canvas.getContext('2d');

​

  context.fillStyle = '#ccc';

  context.fillRect(0, 0, 100, 50); //x,y,w,h

  // translate(canvas, context, 0, 0, 100, 50, 'x', 5);

  //context.fillStyle = 'skyblue';

  //context.fillRect(canvas.width-100, canvas.height-50, 100, 50); //x,y,w,h

  translate(canvas, context, 0, 0, 100, 50, 'x', 5);

  // translate(canvas, context, canvas.width-100, canvas.height-50, 100, 50, 'x', -5);

  function translate(canvas, context, x, y, w, h, direction, interval) {

    context.fillRect(x, y, w, h);

    if (direction == 'x') {

      if ((x + interval + w >= canvas.width) || (x + interval < 0)) interval = -1 * interval;

      setTimeout(function() {

        context.clearRect(x, y, w, h);

        translate(canvas, context, x + interval, y, w, h, direction, interval);

      }, 1000);

    }

  }

}());