HTML5 Canvas: почему при setTransform изображение оставляет след?

Вот код целиком:

<canvas id="g" width="300" height="225"></canvas>
<script>
var canvas = document.getElementById('g');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'logo.gif';

ctx.fillStyle = '#0fffff';

var angle = 0;

setInterval(function() {
	angle += .005;
	ctx.fillRect(0, 0, 300, 225);
	ctx.setTransform(Math.cos(angle),Math.sin(angle),-Math.sin(angle),Math.cos(angle),10-223/2,10-43/2);
	ctx.drawImage(img, 10, 10, 223, 43);
	ctx.setTransform(0,0,0,0,0,0);
}, 18);
</script>

Почему-то изображение оставляет за собой след, как-будто прямоугольник не перерисовывается. Если вместо setTransform использовать rotate, то проблема исчезает. Откуда такое поведение и как от него избавиться?

Должно быть так:
screenshot.su/show.php?img=c3d8bde7f9a1cba3e64ff65...
а получается так:
screenshot.su/show.php?img=aef90a8bbbe3089b4960ed1...