HTML Canvas горизонтальный флип работает только каждый второй клик

Question

У меня есть элемент canvas с загруженной фотографией. При нажатии на ссылку выполняется следующее:

var ctx = canvas.getContext("2d");
ctx.scale(-1,1);
ctx.drawImage(canvas, canvas.width * -1, 0, canvas.width, canvas.height);

Это работает как ожидалось (изображение переворачивается по горизонтали) при первом щелчке, третьем щелчке, пятом щелчке и т. Д. При втором щелчке, четвертом щелчке, шестом щелчке и т. Д. Ничего не происходит.

Есть идеи о том, как заставить это работать на каждый клик?

Answer 1

Да, проблема в том, что вы не восстанавливаете масштаб холста до 1,1 после того, как рисуете изображение, так что в основном при первом вызове события ваша шкала холста будет превращена в -1,1, следующийвремя будет 1,1, но нужно, чтобы оно всегда было -1,1.Это потому, что вы рисуете изображение непосредственно с холста, а не из элемента изображения, поэтому вам нужно будет каждый раз переворачивать его.

Попробуйте использовать ctx.save() до масштабирования и ctx.restore() после рисованияобраз.Или снова позвоните ctx.scale(-1, 1) после рисования изображения.Или вы можете просто выполнить масштабирование вне события (но после того, как вы впервые нарисовали изображение на холсте), если ваш холст используется только для этого.

Answer 2

Это работает для каждого клика:

http://jsfiddle.net/4kcjn/2/

Спросите себя, а чем он отличается от вашего?

Это может быть связано с загрузкой изображения. Попробуйте свой без изображения. У него все еще та же проблема?