title: Box2dweb - Rope Joint is not working
body: <p>I have the following code for Rope Joint (Box2dweb). The problem is that when I run the code in my browser nothing happens. Just a blank canvas. When I delete the lines defining the joints (the eight lines following //joints), it runs and I can see one static box and two dynamic boxes falling on the ground. Please help.</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;Box2dWeb&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;canvas id="canvas" width="600" height="400" style="background-color:#333333;" &gt;&lt;/canvas&gt;
     &lt;/body&gt;
     &lt;script type="text/javascript" src="Box2dWeb-2.1.a.3.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
          var    b2Vec2 = Box2D.Common.Math.b2Vec2
          ,      b2BodyDef = Box2D.Dynamics.b2BodyDef
          ,      b2Body = Box2D.Dynamics.b2Body
          ,      b2FixtureDef = Box2D.Dynamics.b2FixtureDef
          ,      b2World = Box2D.Dynamics.b2World
          ,      b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape
          ,      b2CircleShape = Box2D.Collision.Shapes.b2CircleShape
          ,      b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef
          ,      b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef
          ,      b2RopeJointDef = Box2D.Dynamics.Joints.b2RopeJointDef
          ,      b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef
          ,      b2DebugDraw = Box2D.Dynamics.b2DebugDraw
          ,      b2Fixture = Box2D.Dynamics.b2Fixture
          ,      b2AABB = Box2D.Collision.b2AABB
          ,      b2Color = Box2D.Common.b2Color;
  
          var world = new b2World(new b2Vec2(0,10), true);
  
          //box1
  
          var bodyDef = new b2BodyDef;
          bodyDef.type = b2Body.b2_dynamicBody;
          bodyDef.position.Set(8,4);
  
          var fixDef = new b2FixtureDef;
          fixDef.density = 10.0;
          fixDef.friction = 0.5;
          fixDef.restitution = .5;
  
          fixDef.shape = new b2PolygonShape;
          fixDef.shape.SetAsBox(.3,.3);
  
          var box1 = world.CreateBody(bodyDef);
          box1.CreateFixture(fixDef);
  
          //box2
  
              var bodyDef2 = new b2BodyDef;
          bodyDef2.type = b2Body.b2_dynamicBody;
          bodyDef2.position.Set(14,8);
  
          var fixDef2 = new b2FixtureDef;
          fixDef2.density = 10.0;
          fixDef2.friction = 0.5;
          fixDef2.restitution = .2; 
          fixDef2.shape = new b2PolygonShape;
          fixDef2.shape.SetAsBox(.3,.3);
  
              var box2 = world.CreateBody(bodyDef2);
          box2.CreateFixture(fixDef2);
  
          //box3 - static
  
              var bodyDef3 = new b2BodyDef;
          bodyDef3.type = b2Body.b2_staticBody;
          bodyDef3.position.Set(11,8);
  
          var fixDef3 = new b2FixtureDef;
          fixDef3.friction = 0.5;
          fixDef3.restitution = .2; 
          fixDef3.shape = new b2PolygonShape;
          fixDef3.shape.SetAsBox(.3,.3);
  
              var box3 = world.CreateBody(bodyDef3);
          box3.CreateFixture(fixDef3);
  
           //create a ground
  
               var holderDef = new b2BodyDef;
               holderDef.type = b2Body.b2_staticBody;
               holderDef.position.Set(10, 14);
  
           var fd = new b2FixtureDef;
           fd.shape = new b2PolygonShape;
           fd.shape.SetAsBox(10,1);
  
               var ground = world.CreateBody(holderDef);
           ground.CreateFixture(fd);
  
           //  joints
  
          var ropeJointDef = new b2RopeJointDef();
          ropeJointDef.bodyA = box1;
          ropeJointDef.bodyB = box2;
          ropeJointDef.localAnchorA = new b2Vec2(0,0);
          ropeJointDef.localAnchorB = new b2Vec2(0,0);
          ropeJointDef.maxLength = 6;
          ropeJointDef.collideConnected = true;
          world.CreateJoint(ropeJointDef);
  
          var debugDraw = new b2DebugDraw();
          debugDraw.SetSprite ( document.getElementById ("canvas").getContext ("2d"));
          debugDraw.SetDrawScale(30);     //define scale
          debugDraw.SetFillAlpha(0.3);    //define transparency
          debugDraw.SetLineThickness(1.0);
          debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
          world.SetDebugDraw(debugDraw);
  
          window.setInterval(update,1000/60);
  
          function update() {
              world.Step(1 / 60, 10, 10);
              world.DrawDebugData();
              world.ClearForces();
          };
  
     &lt;/script&gt;
  
  
  &lt;/html&gt;
  </code></pre>