HTML5 Canvas: Why does the image leave a trail when setTransform is set?

Question

Canvas

Here is the whole code:

<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>

For some reason, the image leaves a trail behind it, as if the rectangle is not being redrawn. If you use rotate instead of setTransform, then the problem disappears. Where does this behavior come from and how to get rid of it?
It should be like this:
screenshot.su/show.php?img=c3d8bde7f9a1cba3e64ff65...
but it turns out like this:
screenshot.su/show.php?img=aef90a8bbbe3089b4960ed1...

Answer 1

Weird, I tested it and everything works smoothly without blurring
codepen.io/anon/pen/ABbhq

Answer 2

need to clean up the canvas

Answer 3

www.w3schools.com/tags/canvas_clearrect.asp

Answer 4

upload the page to the fiddle along with the gif - debug