I'm cloningg, i'm doing camera 2d in angry bird game using javascript html5 game and box2d.js . I'm using context.translate(x,y) to move canvas, but i meet an error like this : many image
of birds saved


Everyone has a solution about camera 2d?? Thanks!!!

  • \$\begingroup\$ I'm not familiar with HTML5, but it seems like you need to clear the canvas between each frame. \$\endgroup\$ – MichaelHouse Nov 21 '12 at 20:13
  • \$\begingroup\$ So, how to clear canvas betwwen each frame? context.clearrect(..)??? i use it but not . \$\endgroup\$ – user919496 Nov 21 '12 at 23:13
  • \$\begingroup\$ See the first part of my response. I'm not familiar with HTML5. You could try searching for it. \$\endgroup\$ – MichaelHouse Nov 22 '12 at 0:41
  • \$\begingroup\$ Anybody help me:( \$\endgroup\$ – user919496 Nov 22 '12 at 4:50

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.

https://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!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.