Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

share|improve this question
I ended up adding an offsetX/offsetY property to the implementation I was using. Info can be found here (at the bottom)… – onedayitwillmake Jul 4 '11 at 20:05
No ideal, hence the bounty! – onedayitwillmake Jul 4 '11 at 20:06
I am just playing around to solve the same problem. For box2d I had luck with the code here:… – philipp Sep 9 '12 at 16:53
up vote 1 down vote accepted

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.
share|improve this answer

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.

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

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.