Drawing a simple circle using Crafty.js and Box2d

i am trying to draw a simple circle using box2d with crafty.js but i can't seem to able to draw it this is the jsfiddle : http://jsfiddle.net/B5UsC/2/

look at this part of the code :

var ball = Crafty.e("2D, Canvas,Color, Box2D,ball")
                .attr({ x: 10, y: 15, z:5 })
                .color("#fff")
            .box2d({
                bodyType: 'dynamic',
                density: 1.0,
                friction: 2,
                restitution: 0.2,
                shape: 'circle'
            }).onContact("Floor",
                        function (data) { 
                        alert("Hi");
                        });

the weird thing about it is that alert is executed but the ball is not showing . am i missing something please help

The external resources

Box2dWeb-2.1.a.3.js

box2d.js

crafty.js

this directs to an Unavailable Page that's why it doesn't work in the fiddle

---

Try downloading the source CraftyJS,Box2dweb and Box2d

Try and see if that works for you.

Ok I got your code working, it seems that the reference library crafty+box2d is a mod made by the user who made the pong game.

You forgot to put the width w and height h attribute in the .attr of the ball object.

        var ball = Crafty.e("2D, Canvas,Color, Box2D,Ball")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })
            .color("#dddddd")
        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

On the other hand if you want the box outline eating the circle remove the text ,color in the string argument of Crafty.e and erase the .color property

        var ball = Crafty.e("2D, Canvas,ball, Box2D,")
            .attr({ x: 10, y: 15, z:5 , w:25,h:25 })

        .box2d({
            bodyType: 'dynamic',
            density: 1.0,
            friction: 2,
            restitution: 0.2,
            shape: 'circle'
        }).onContact("Floor",
                    function (data) { 
                    alert("Hi");
                    });

Hope this helps :)