How do I draw my Box2D world using HTML5 Canvas instead of Debug Draw?

I know HTML5 canvas fairly well, I know the basics and animation using loops etc.

Demo I'm working with: (click to make shapes) http://henry.brown.name/experiments/box2d/example-canvas.html

What I'm not very familiar with is Box2D. I'm using the Box2DWeb port, I heard it was newer than Box2D-js, I'm not sure which is best.

I know how to initialize the 'world' and I can place objects in the world. I then use Step to animate the world - however to display it on the screen so far I've only been able to get it working with debug draw as it basically does everything for you.

Instead of using debug draw I'd like to use canvas to draw, for example a car instead of just a square. How do I attach the physics of a square to the开发者_StackOverflow中文版 image of a car? I just can't get my head around integrating canvas with Box2D.

Any tips will be massively appreciated!

Thanks

I spent the last few days trying the same thing. I found Jonny Strömberg's tutorial, which is not super detailled but by analyzing the code I found how he retrieves the body's position:

var b = world.GetBodyList()

GetBodyList() seems to be an iterative Array, so the next body is accessible through b.m_next.

You can then use

b.GetPosition().x
b.GetPosition().y
b.GetAngle()

to retrieve the body's coordinates.

EDIT: this code is for the Box2dweb library, which I found better documented than Box2djs

If you aren't familiar with Box2D you should check out the documentation at http://www.kyucon.com/doc/box2d/. This should tell you all of the properties you need. To my knowledge the standard way of using Box2D is to attach an image with userData. See this example tutorial for image and Canvas image usage.

http://www.jeremyhubble.com/box2d.html

I had the same question. here is the documentation of it. You could use calls like GetBodyList() , GetAngle()and members like m_position to get all that you need to paint whatever using whatever library you want to use on a canvas.