this demo shows box2d’s debugview. I don’t know if it’s possible to change colors in debugview, but the endresult normaly isn’t debugview, but a view with rendered graphics, for example with EaselJS

Not sure if you did it on purpose, but maybe you could change the variables e.pageX and e.pageY inside the mousemove handler into e.offsetX and e.offsetY to get the local canvas-position instead of the full webpage-position.

var p = get_real(new b2Vec2(e.offsetX/scale, e.offsetY/scale));

On this website it makes no difference, ’cause the animation plays inside an iframe, but if you’re having the code and canvas on the page itself and the canvas is not positioned at the exact top-left corner of the page, mouse interactions are not working correct.

But again, thanks a lot for sharing your knowledge! It helped me a lot and your demo looks great! Even without the actual rope-joints!