Box2d debug, draw simple shapes like circles

Box2d debug, draw simple shapes like circles
0.0 0


Hi there,

I’m developing a game prototype on Cocos2 x HTML5 with box2D.

I’ve got a problem with debuging and box2d. At first, when I tried to add box2d objects to the world, the objects would not appear on the canvas. The canvas was black, except for sprites which were included in the demo. It was like the box2d debug objects were showing…“behind” the black default background of the canvas. Invisible to the eye but still present.

I wanted to see the debug version of the object but couldn’t solve this so I made another canvas in my html file, and then I set up the debugdraw like this: (if I’m wrong here please help)

this.debugDraw = new b2DebugDraw(); this.debugDraw.SetSprite(document.getElementById("debugCanvas").getContext("2d")); 
b2DebugDraw.e_shapeBit|b2DebugDraw.e_jointBit| Box2D.Dynamics.b2DebugDraw.e_centerOfMassBit 

(you’ll notice I don’t use cc.renderContext here, but my “debug” canvas in the SetSprite).

Anyway, when doing this, I have a proper Canvas and then a Debug Canvas.

My actual question: I want to draw circles for debugging pruposes on the Debug canvas. I’m really saying pure Circles, no box2d physics objects. But I don’t know how to draw these shapes on the debug canvas.

If I do it the Cocos2d way, obviously, it will draw on the main Canvas, not the Debug one; like this:

var drawnode = cc.DrawNode.create();
drawnode.drawDot( cc.p(100,100), 90, cc.c4f( 1, 0, 0, 1) );

So basically two questions in one:

  1. Is it ok to use two canvas (1 “proper” sprite canvas, 2nd is “debug”); or do you know a solution to maybe combine debug and normal canvas into one ?
  2. If yes indeed, how can I draw shapes (shapes, not physics objects) on the debug Canvas ?

Many thanks in advance!
(have attached a picture to better explain my problems)

debugdraw.jpg (33.6 KB)


Hi dajeff,
i guess you must have gotten the answer you are looking for, but i am answering this question just for the sake of someone who stumbles on this question in future, since it has not been answered.

I am not an expert in cocos2d html5 but in the short time i have been using it(as of cocos2d js 3.7), i have observed that it is very convenient to use two canvas, one as debug canvas, the other as you your rendering canvas because box2d and cocos2d using opposite method to draw objects.

When you draw box 2d debug objects, they usually appear upside down in the cocos2d js, and you will therefore have to use css to invert the canvas for it to display appropriately.

i stand to be corrected though