HTML5 Canvas, 2nd Edition

Rendering b2debugDraw vs. Canvas Rendering

The b2debugDraw functionality of Box2D is just a way to test your physics world and see it working in a web browser. It is not an implementation of the physics for your application. We will use debugDraw to illustrate the objects we have created so that we can see them in action. In example CH5EX22.html, we will show you how to apply Box2D to the Canvas. For now, we just want to see the physics model we have created.

The following code is fairly boilerplate for getting b2debugDraw to work. The SetSprite() method takes the Canvas context as a parameter. This means that the Canvas will be completely overwritten by the output from b2debugDraw. This is why it’s just for testing. SetScaleFactor() takes the value we used to convert from pixels to MTS units (30). SetFillAlpha() sets the transparency of the lines of the objects when displayed, and likewise, SetLineThickness() sets the thickness of those lines. The SetFlags() method accepts a single bit-wise parameter of options for display: e_shapeBit draws the shapes, and e_jointBit draws joints (but because we have not created any, you will not see them):

var debugDraw = new b2DebugDraw();
debugDraw.SetSprite (context2);
debugDraw.SetDrawScale(30);
debugDraw.SetFillAlpha(0.3);
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);