# Scrolling Box2D DebugDraw

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.

Here is an example of what I mean:
http://onedayitwillmake.com/ChuClone/

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:
https://github.com/onedayitwillmake/ChuClone

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

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.save();
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.
world.DrawDebugData();
debugCtx.restore();


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.

• Or you can just glTranslate (or equivalent) beforehand and use a simpler (or stock) DebugDrawer. – user744 Oct 15 '11 at 21:25