Canvas clearing issue. Select objects not clearing in Canvasteroids

Question

I am creating a new asteroids game with html5 canvas. It's been going well up to the point where I have to dynamically draw lasers onto the stage. They don't draw correctly (they should only be 10pixels long) and when you shoot twice over 10 seconds apart the old laser trail shows up. Here's the url because there's more code than I care to put everyone through.

http://marccannon.com/canvasteroids/

Ideally the lasers will be 10px long and go away once they're out of life (1sec or 33 frames). They get shift() out of an array that should no longer be running them in the draw loop. It seems as though there's some kind of memory with the Laser object class. So far I've spent hours making space art with laser trails instead of adding the actual asteroids to hit. Someone please help. I'm losing my sanity.

Thanks in advance for your help.

Answer 1

The problem is that when you draw on a canvas you must must always remember to call beginPath(), otherwise all moveTo and lineTo commands will keep adding and adding to the current path.