Camera game 2d Javascript using box2d

Short answer:

Call context.clearRect( 0, 0, context.canvas.width, context.canvas.height ) just before drawing onto the canvas every frame.

It's not really about the camera though, unless it's responsible for the drawing onto the canvas. It's also not about box2d.

As mentioned by Byte56, you need to clear the canvas before drawing. This is because the methods used to draw onto the canvas (e.g. context.drawImage) only draws on top of the existing image.

The canvas can't clear the frame automatically because the canvas would not know when to clear it. Luckily, the canvas allows the following methods to clear it manually.

http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing suggested two ways (by Pentium10):

1. context.clearRect( x, y, w, h ) where x and y is usually zero, or wherever you want it to start clearing (the top-left corner), and w and h are width and height respectively.
2. canvas.width = canvas.width or if that doesn't work try canvas.width = someOtherWidth; and then setting it back canvas.width = width. (note: Prestaul noted that using clearRect can be 10% faster than changing the width)

Later Prestaul reminded that if you had modified the transformation, you'll need to save the current transformation, then use clearRect, and finally changing back the transformation.

trembl also reminded that you need to beginPath() in order for lines to be cleared.

Please go over to that page yourself, because I did not cover everything mentioned there. That page can also be found by googling "javascript canvas clear". Also, remember that even though it may work on your web browser, doesn't mean that it will work on others!

Anyways, good luck on your game!