Как использовать rotate в canvas HTML5?
В топике, что вам дали выше есть целый абзац про это:
Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами 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);

Один из вариантов есть в "Canvas-трансформации доступным языком"