Using arc() with an Animation

HTML

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

JavaScript

var radius = 50;
var posY = 70;
var posX = radius;
var speed = 10;
var canvas, ctx, canvasWidth, canvasHeight;
var dir = 1;

var pixiCircle = new PIXI.Graphics();
pixiCircle.lineStyle(2, 0xFF00FF);  //(thickness, color)
pixiCircle.drawCircle(0, 0, 10);   //(x,y,radius)
pixiCircle.endFill(); 

stage.addChild(pixiCircle);

window.requestAnimFrame = function() {
    return window.requestAnimationFrame || 
           window.webkitRequestAnimationFrame || 
           window.mozRequestAnimationFrame || 
           window.oRequestAnimationFrame || 
           window.msRequestAnimationFrame ||
           function(callback) {
               window.setTimeout(callback, 1000 / 60);
           };
}();

function update() {
    //Move to right until we reach canvas width
    if (dir > 0) {
        dir = (posX < canvasWidth - radius) ? 1 : -1;
    }
    //Move to left until we reach 0
    if (dir < 0) {
        dir = (posX > 0 + radius) ? -1 : 1;         
    }   
    //posX += speed * dir; 
}

function draw() {    
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(posX, posY, radius, 0, 2 * Math.PI, false);
    ctx.closePath();
    ctx.fill();
}

function animate() {
    update();
    draw();
    requestAnimFrame(animate);  
}

$(document).ready(function() {
    canvas = document.getElementById('myCanvas');
    canvasWidth = canvas.width;
    canvasHeight = canvas.height;
    ctx = canvas.getContext('2d');
    animate();
});