caetus,
строка 16 заменяет ваш 1 цикл , остальное просто для примера.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<canvas id="canvas" width="100" height="100"></canvas>
<script>
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
function bar (mas){
function draw() {
mas.unshift(mas.pop());
for (var i = 0; i < mas.length; i++){
ctx.lineWidth = 10;
ctx.strokeStyle = mas[i] ;
ctx.beginPath();
ctx.moveTo(5+i*20,10);
ctx.lineTo(5+i*20,20);
ctx.stroke();
}
setTimeout(draw, 100)
}
draw()
}
bar(['#B8B8B8', '#A8A8A8', '#989898', '#888888', '#787878'])
</script>
</body>
</html>