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

Demo I'm working with: (click to make shapes) /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 image of a car? I just can't get my head around integrating canvas with Box2D.

Any tips will be massively appreciated!

Thanks

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 image of a car? I just can't get my head around integrating canvas with Box2D.

Any tips will be massively appreciated!

Thanks

• javascript
• jquery
• physics
• box2d

• 1 Awesome link, you'll be interested in uselesspickles./jsballs , it's got nothing to do with the question, but it's also an awesome JavaScript physics simulation – Ruan Mendes Commented Oct 14, 2011 at 12:14
• 1 Hey. I was wondering if you got this issue solved. I have the same issue. I have no idea of how to access the parameters like position, velocity, angle of an object. Debug Draw, draws everything using all those parameters. I wanted to know how we can directly access them. – batman Commented Oct 12, 2012 at 19:34
• 1 Very late response, but yes I got the issue resolved. I will ment within the other answers. – Sabai Commented May 7, 2013 at 10:18

3 Answers 3

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./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./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.