В топике, что вам дали выше есть целый абзац про это:
Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами rotate и translate, иначе мы никогда не попадём картинкой в нужное место. Самый простой способ осью вращения выбрать центр картинки и отрисовывать её в координаты (-width/2, -height/2). К примеру, мы хотим развернуть картинку размерами 50х50, находящуюся на координатах 100:100. Указываем translate в координату 125:125 и отрисовываем картинку в координату -25:-25. Альтернатива — использовать LibCanvas и метод rotatedImage(или drawImage в ближайшем будущем) и не напрягаться.
При помощи LibCanvas, который можно
скачать с GitHub это будет выглядеть как-то так:
canvas
.getContext('2d-libcanvas')
.drawImage({
image: yourCanvas,
from : [15, 40],
angle: (60).degree()
});
Если использовать расширение Number.prototype.degree из топика, то ваш код может выглядеть так:
function rotatedDrawImage (ctx, image, fromX, fromY, angle) {
ctx.save();
ctx.translate(fromX + image.width / 2, fromY + image.height / 2);
ctx.rotate(angle.degree());
ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2));
ctx.drawImage(image, fromX, fromY);
ctx.restore();
}
rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60);
