[Proyecto] Movimiento dinámico circulo

Acá les dejo mi versión de código para la práctica de la animación de movimineto del circulo de un aldo a otro en el eje x, confieso que no encontré como establecer los valores de incremento y decremento para el movimiento del círculo hast que miré las opiniones del instructor...

<canvas width="600" height="400"></canvas>

<script>

    const d = document

    var $canvas = d.querySelector("canvas")
    var brush = $canvas.getContext("2d")

    let canvasW = $canvas.getAttribute("width")
    let canvasH = $canvas.getAttribute("height")

    brush.fillStyle = "lightgray"
    brush.fillRect(0, 0, canvasW, canvasH)

    let radius = 20
    let xCenter = 20
    let yCenter = 20
    let fill = "blue"

    let leftStart = radius
    let rightEnd = canvasW - radius

    let xMovement = 1

    function drawCircle(xPoint, yPoint, radius, fill) {
        let fullAngle = 2 * Math.PI
        brush.fillStyle = "lightgray"
        brush.fillRect(0 , 0, canvasW, canvasH)
        brush.fillStyle = fill
        brush.beginPath()
        brush.arc(xPoint, yPoint, radius, 0, fullAngle)
        brush.fill()
    }

    function cleanCanvas() { brush.clearRect(0, 0, canvasW, canvasH) }

    function animateCanvas() {
        cleanCanvas()
        if(xCenter >= rightEnd) xMovement *= -1
        if(xCenter <= leftStart) xMovement = 1
        drawCircle(xCenter, yCenter, radius, fill)
        xCenter += xMovement
    }

    setInterval(animateCanvas, 10)

</script>