13

I have a polygon object (say a car) drawn inside a HTML5 canvas with help of methods moveTo and lineTo. I want to repeatedly draw that object at different positions in the canvas (simulating a moving object). My problem is that the previous drawn object is not getting cleared. Instead, multiple images are drawn on the canvas. How can I fix this issue?

Falko
  • 17,076
  • 13
  • 60
  • 105
Anish
  • 872
  • 5
  • 21
  • 42
  • Can you post some code? – Tom Jun 06 '13 at 18:46
  • Closely related: [How do I get reference of old generated elements in HTML Canvas?](http://stackoverflow.com/q/13973747/710446) – apsillers Jun 06 '13 at 18:48
  • I made a fiddle to answer this SO question: http://stackoverflow.com/q/16728162/2252829 . In fiddle I have two canvases, one for static objects and another for dynamic. Might be useful. [jsFiddle link](http://jsfiddle.net/gfcarv/N22Na/) – Gustavo Carvalho Jun 06 '13 at 19:16

3 Answers3

15

You have to clear the canvas at the start of every draw frame

context.clearRect(0, 0, canvas.width, canvas.height);
Tom
  • 4,422
  • 3
  • 24
  • 36
  • This will clear my other background data's as well.. I only need to remove the car object which i'm drawing repeatdly – Anish Jun 06 '13 at 18:53
  • 3
    Yes, you'll have to redraw the background as well as the car in it's new position. Alternatively, if you background doesn't move, you can just layer an image directly underneath your canvas. That way you won't have to redraw the background each time--just redraw the moving car. – markE Jun 06 '13 at 19:01
12

Canvases are just arrays of pixels, they know nothing of the shapes you have drawn.

There are animation tricks that used to be used on bitmapped displays (e.g. "xor drawing") that can be used to remove the old shape before you draw the new one, but on modern machines it's generally far simpler (and perfectly fast) to just erase the canvas and start again for each frame.

Given your comments to other answers, I'd suggest just using two Canvases - one for the static background and one for the car. If the background image is static it could even be an <img> element instead of a Canvas.

If the car image is static you could also just draw that once, and then use CSS positioning to set its position relative to the background for each frame.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • 3
    @OP You could also draw the background and the overlays on separate canvas elements and merge them back up at the end of your animation loop. – rlemon Jun 06 '13 at 19:03
  • 3
    @rlemon no need to even merge them - with CSS positioning you can just have one on top of the other – Alnitak Jun 06 '13 at 19:06
  • @rlemon, could you please add a minimal example of the CSS-based layering as a separate answer? – Leo Dec 27 '15 at 21:22
  • @Leo just give both canvases `fixed` or `absolute` positioning with the same `left` and `top` values. AFAICR, the one that appears second in the DOM will be "topmost" – Alnitak Dec 27 '15 at 21:32
  • this is correct ^ or you can play with z-indexs, but that is messier. – rlemon Dec 28 '15 at 13:16
0

suppose your shape is car then you first have to assign a new graphic like:

car.graphics = new createjs.Graphics();

car.graphics
            .setStrokeStyle(1)
            .beginStroke("#000000")
            .moveTo()
            .lineTo()
            .lineTo()
bguiz
  • 27,371
  • 47
  • 154
  • 243
Ankush singh
  • 1