Estoy tratando de animar un círculo y solo lo muevo horizontalmente, lo que funciona bien. Sin embargo, mientras el círculo se mueve, tengo que hacer una ClearRect sobre ese círculo para que se vuelva a dibujar en la dirección horizontal. Cuando hago un ClearRect, también hace que el fondo tenga un cuadro blanco alrededor de manera tan efectiva que será una línea horizontal blanca en la dirección en que se mueve el círculo.

¿Hay alguna forma de borrar el círculo sin clearRect? Si tengo que seguir dibujando el fondo después de borrar Rect, el lienzo parpadeará cuando digamos 10 círculos moviéndose en esa área.

¿Algún otro enfoque para resolver esto?

    function drawcircle() {
        clear();    

        context.beginPath();
        context.arc(X, Y, R, 0, 2*Math.PI, false);                  
        context.moveTo(X,Y);            
        context.lineWidth = 0.3;
        context.strokeStyle = "#999999"; 
        context.stroke();

        if (X > 200)
        {
            clearTimeout(t); //stop
        }
        else
        {
            //move in x dir
            X += dX;
            t = setTimeout(drawcircle, 50);
        }
    }

    function clear() {
        context.clearRect(X-R, Y-R, 2*R, 2*R);
    }