I'm developing a game using Box2D (javascript implementation - Box2DWeb), and I would like to know how I can pan the debug draw. I know the usual answer is - don't use debug draw, it's just for debugging. I'm not, however not all my objects are on the same screen, and i'd like to see where they are in the physics representation.

How can I pan the debug drawing?

As you can see the debug draw stuff, is show on the top left, but it only shows a small part of the world.

Box2D debug draw is on the top left Here is an example of what I mean:

The game is open source, If you'd like to poke through and note something that perhaps i'm doing something that is obviously wrong:

Here's my hacky way that I'm using now to scroll the b2DebugDraw view, in which I added a property offsetX and offsetY into b2DebugDraw enter image description here


2 Answers 2


I've asked this question myself, and the answer is quite simple, just translate the debug draw context.

        debugDraw.SetDrawScale( camera.scaleWorldToScreen ); //My camera is doing the worldToScreen/screenToWorld conversion, so it has the scales.

        debugCtx.clearRect( 0, 0, debugCanvas.width, debugCanvas.height );
        debugCtx.translate( camera.position[0], camera.position[1] ); //translate it to the camera position
        debugCtx.scale( 1, -1 ); //invert the y coord.

I'm not sure if this applies to your case or not, but c++ implementation of box2d ask for some class to do rending jobs. so you have to provide box2d with some class telling him how to draw objects. you can manually pad all the given box2d data in your debugdraw class.

  • 2
    \$\begingroup\$ Or you can just glTranslate (or equivalent) beforehand and use a simpler (or stock) DebugDrawer. \$\endgroup\$
    – user744
    Commented Oct 15, 2011 at 21:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .