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

Translating to the Canvas

So far, we have looked only at Box2D output with b2DebigDraw . While this looks neat, it's
not really useful for Canvas applications. As we stated earlier, Box2D is just a “physics mod-
el.” It is your job to apply that model to the HTML5 Canvas. In this next example, we will
take the bouncing balls from the last example and show them running side-by-wide with the
Canvas. (See Figure 5-27 .)

Figure 5-27. Bouncing balls in Box2D on the Canvas and in b2DebugDraw

The first thing we need to do is to define a second Canvas in our HTML to show the b2De-
bugDraw output:

<canvas <canvas id= "canvasOne" width= "450" height= "350" >

Your browser does not support the HTML 5 Canvas.
</canvas>

</canvas>
<canvas <canvas id= "canvasTwo" width= "450" height= "350" >

Your browser does not support the HTML 5 Canvas.
</canvas>

</canvas>
NoticethattheCanvasisnowsmaller(450×350).Wechangedthesizesothatwecouldeasily
fittwoCanvasessidebysideinthewebbrowser.Wealsoneedtomakesuretogetareference
to both in our JavaScript code:

var var theCanvas = document . getElementById ( 'canvasOne' );

var var context = theCanvas . getContext ( '2d' );

var var theCanvasTwo = document . getElementById ( 'canvasTwo' );

var var context2 = theCanvasTwo . getContext ( '2d' );