CraftyJS Circle tween

HTML

<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty.js"></script>
 <script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
 
 
 halo

JavaScript

Crafty.init();
Crafty.background("red")

Crafty.c("Circle", {
    Circle: function(radius, color) {
        this.radius = radius;
        this.w = this.h = radius * 2;
        this.color = color || "#000000";
        
        return this;
    },
    
    draw: function() {
       var ctx = Crafty.Crafty.canvasLayer.context;
       ctx.save();
       ctx.fillStyle = this.color;
       ctx.beginPath();
       ctx.arc(
           this.x + this.radius,
           this.y + this.radius,
           this.radius,
           0,
           Math.PI * 2
       );
       ctx.closePath();
       ctx.fill();
    }
});

    
Crafty.e("2D, Canvas, Circle, Tween")
    .circle(40, "#FF0000")
    .tween({radius: 5, x: 100}, 500);