Box2dweb Drawing a static line

Question

I'm building a small html5 game using box2dweb. I'm attempting to draw a line on mousedown + mousemove. These lines will catch dropping squares and the object is to bounce the squares out of the holes on either side of the page.

All I've been able to do is draw several squares along the mouseX and mouseY to simulate a solid line but I don't feel this is sufficient. Can anyone help me understand how to draw a solid line or a single polygon that conforms to the shape of the desired line?

The work in progress is here http://acoolsip.com/html5/mobile/

currently the methods that are handling mouseclick, mousemove and the line drawing are these functions.

    function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);

    bodyDef.type = b2Body.b2_staticBody;
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(
         0.1 //Math.random() + 0.1 //half width
      ,  0.1 //Math.random() + 0.1 //half height
    );

    //the position of the created object        
    bodyDef.position.x = x;
    bodyDef.position.y = y;            

    //bodyDef.angle = 1; 
    world.CreateBody(bodyDef).CreateFixture(fixDef);      
}



document.addEventListener("mousedown", function(e) {
       isMouseDown = true;
       mouseX = (e.clientX - canvasPosition.x) / 30;
       mouseY = (e.clientY - canvasPosition.y) / 30;     
       addClick(mouseX,mouseY);
}, false);

document.addEventListener('mousemove', function(e) {
    if(isMouseDown == true)
    {
        isMouseMoving = true;
        e.preventDefault();
        mouseX = (e.clientX - canvasPosition.x) / 30;
        mouseY = (e.clientY - canvasPosition.y) / 30;
        addClick(mouseX, mouseY, true);         
    }
}, false);

Thank you for your help.

JasonWoof JasonWoof · Accepted Answer · 2012-04-02T01:32:18

There is no way to draw a line that works in all browsers. (except straight vertical and straight horizontal lines.)

I suggest you use a graphics library like raphael.

Edit: here's the raphael website: http://raphaeljs.com/

Box2dweb Drawing a static line

1 Answers