Canvas - move image-problem

Question

i have a problem with my script that use canvas.

I want to move my image but with drawImage the image moves but the result is something like that:

so, my code is

function desenhaBonecoDir(){
    var ctxt = document.getElementById('camadaBoneco').getContext("2d");
    bonecoX = bonecoX -10;
    ctxt.drawImage(bonecoLeft, bonecoX, bonecoY);

}

and i think that the only way is using SVG (retained mode). It is correct?

Any tutorial? or example? - "how moving an image with SVG" How i can solve that?

Thanks

Answer 1

You need to erase all or part of your canvas and redraw. Yes, using SVG or HTML + CSS is easier, but not necessary.

Here's an example of moving sprites over a background, with the option to erase and redraw all or part of the BG: http://phrogz.net/tmp/image_move_sprites_canvas.html

Note that just using CSS is faster than canvas.

Answer 2

This code solves my problem

context2D.clearRect(0, 0, canvas.width, canvas.height); 

Good example here: http://brighthub.com/internet/web-development/articles/38744.aspx?p=3