회전 된 HTML5 캔버스 컨텍스트를 올바르게 지우는 방법은 무엇입니까?

Question

회전 된 사각형을 지우고 캔버스에서 같은 위치 또는 다른 곳에 다시 그려야합니다. 문제는 지워진 부분이 사각형의 경계와 일치하지 않아 더티 비트가 뒤에 남는 것입니다. 캔버스가 회전 된 구형으로 사용되는 전체 회전되지 않은 공간을 취소하여, 회전 할 때

var cvs = document.getElementById('testcanvas'); 
var ctx = cvs.getContext('2d'); 

var rectColor = 'green'; 
var x = 300; 
var y = 10; 
var width = 200; 
var height = 150; 
var rotation = 0; 
setInterval(animate, 100); 

function animate(){ 
    clearRect(); 
    update(); 
    drawRect();  
} 

function clearRect(){ 
    ctx.save(); 
    ctx.rotate(rotation); 
    ctx.clearRect(x, y, width, height); 
    ctx.restore(); 
} 

function update(){ 
    rotation += 0.1; 
    x++; 
} 

function drawRect(){ 
    ctx.save(); 
    ctx.fillStyle = rectColor; 
    ctx.rotate(rotation); 
    ctx.fillRect(x, y, width, height); 
    ctx.restore();   
} 

http://jsfiddle.net/MFz2z/15/

또 다른 문제의 clearRect (

)는 파이어 폭스에서 다르게 동작합니다.
http://jsfiddle.net/MFz2z/17/

전체 캔버스를 지우고 모든 것을 다시 그리는 것 이외에 다른 해결 방법이 있습니까? 저는 Chrome 22와 Firefox 15.0.1을 사용합니다.

Answer 1

여분의 작은 비트를 만드는 픽셀의 앤티 앨리어싱 때문일 수 있습니다.

이 http://jsfiddle.net/MFz2z/28/을 사용할 수 있으며 기본적으로 각면이 1 픽셀 더 명확합니다.