Caixa de rolagem2D DebugDraw

Estou desenvolvendo um jogo usando o Box2D (implementação de javascript - Box2DWeb) e gostaria de saber como posso fazer um pan do desenho de depuração. Eu sei que a resposta usual é - não use debug draw, é apenas para depuração. Não estou, no entanto, nem todos os meus objetos estão na mesma tela, e eu gostaria de ver onde eles estão na representação física.

Como posso deslocar o desenho de depuração?

Como você pode ver, o material de depuração é mostrado no canto superior esquerdo, mas mostra apenas uma pequena parte do mundo.

Aqui está um exemplo do que quero dizer:
http://onedayitwillmake.com/ChuClone/

O jogo é de código aberto. Se você quiser ler e observar algo que talvez esteja fazendo algo obviamente errado:
https://github.com/onedayitwillmake/ChuClone

Aqui está minha maneira hacky que estou usando agora para rolar a exibição b2DebugDraw, na qual adicionei uma propriedade offsetX e offsetY em b2DebugDraw

Eu mesmo fiz essa pergunta, e a resposta é bastante simples, basta traduzir o contexto do debug draw.

        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();

Não tenho certeza se isso se aplica ao seu caso ou não, mas a implementação do box2d em c ++ solicita que alguma classe faça trabalhos de renderização. então você precisa fornecer ao box2d alguma classe dizendo a ele como desenhar objetos. você pode preencher manualmente todos os dados box2d fornecidos na sua classe de depuração.