Math, Physics, and Animation - HTML5 Canvas - page 421

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 toillustrate theobjects wehavecreated sothat wecanseethem inaction.
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 com-
pletely 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 like-
wise, SetLineThickness() setsthethicknessofthoselines.The SetFlags() methodaccepts
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 var debugDraw = new 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 );