problem with clear html5

i have this code

开发者_JS百科

function clear(){
    context2D.clearRect(0, 0, canvas.width, canvas.height);
}


function desenhaBonecoDir(){

    clear();
    context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);//problem here
    context2D.drawImage(bonecoRight, x, y);
    x += -10 * xDirection;
}

if i delete the line where i comment "problem here", the script works well, but if i change the perspective with the set transform i don't know why, the image is copied but undeleted,the result is a repeated image when i press the keys

Any help?

thanks

---

The problem is caused from changing the perspective, but not changing it back when you clear it, so it clears the "perspective" and not the whole canvas, try below. What it does is saves the current perspective, you then change it to whatever you need, draw etc, then restore restores the previous perspective so you get your normal coords back.

context2D.save();
context2D.setTransform(1, 0.30, 1, -0.30, 10, 380);
context2D.drawImage(bonecoRight, x, y);
context2D.restore();

Modified your code just a bit to show it working. http://jsfiddle.net/89yjG/1/

Comment save, and restore and you'll notice the artifacts.