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

Question

[Reposlav]

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

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

Answer 1

[Николай Антал]

Странно, протестировал, и все плавно без смазывания работает
codepen.io/anon/pen/ABbhq

Answer 2

[Reposlav]

Все, разобрался. Обнулять setTransform надо так:
ctx.setTransform(0,1,1,0,0,0);
А я обнулял как
ctx.setTransform(0,0,0,0,0,0);
Забыл, как выглядит единичная матрица)

Всем спасибо, и извините за беспокойство)

Answer 3

[Alexander Devid]

надо холст очищать вроде

Comments

[Reposlav]

Так в том-то и дело, что я очищаю его, рисуя по всей поверхности прямоугольник (clearRect мне здесь не нужен, да и не помогает он)

[Alexander Devid]

jsfiddle.net/Lj806aL2
вот вертится

[Reposlav]

У вас нет фона, а мне нужен фон. Кроме того, убирать обнуление setTransform нельзя, потому что он будет влиять на все последующие рисуемые элементы

Answer 4

[Александр Таратин]

www.w3schools.com/tags/canvas_clearrect.asp

Comments

[Reposlav]

Увы, clearRect не помогает, да и не нужны мне прозрачные пиксели

[Александр Таратин]

@Reposlav воспользуйтесь Pixi.js там где не будет поддержки webgl будет работать canvas, а где будет так еще лучше - плавнее анимация будет.

[Reposlav]

Спасибо, обязательно посмотрю! Но сначала хочу разобраться на низком уровне, а потом переходить к библиотекам

Answer 5

[Сергей Краснодемский]

запулите страничку в фидл вместе с гифкой - отладим

Comments

[Reposlav]

jsfiddle.net/vd2xx8hb/3