How to change position of debug draw visualization of Box2D.js?

Question

I'm creating game with the world bigger than screen. So i need to move Debug Draw according to visualization. In flash port to archive this issue we are usually move DisplayObject that uses as target of Debug Draw but in javascript port of Box2D Debug Draw lacks of this possibilities? Or i miss something?

I have used box2dweb javascript port of Box2DFlash 2.1a https://code.google.com/p/box2dweb/.

Answer 1

just use functions of context 2d of canvas:

context.translate(canvasOffset.x, canvasOffset.y); context.scale(scale,scale);

Answer 2

If you want to translate your context from absolute values (i.e. values from the original position and not from the last frame position), you will need to save and restore the context, so you have the same origin for translations. You may also need clearRect to clear the area that will be drawn.

context.save();
context.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
context.translate(canvasOffset.x, canvasOffset.y);
world.DrawDebugData();
context.restore();