Não consegui fazer com que a bolinha azul rolasse na horizontal. O efeito visual se parece com uma barra da extremidade arredondada crescendo para o lado direito da tela.
<canvas id="tela" width="600" height="400"> </canvas>
<script>
var tela = document.getElementById("tela");
var c = tela.getContext("2d");
var circulo = function(x, y, raio) {
c.fillStyle="blue";
c.beginPath;
c.arc(x, y, raio, 0, 2*Math.PI);
c.fill();
}
var limpaTela = function() {
c.clearRect(0,0,600,400);
}
var x = 1;
var desenha = function() {
limpaTela();
circulo(x, 100, 10);
x = x + 1;
}
setInterval(desenha, 30);
</script>
