Html5 canvas 如何将图像添加到画布，并在其上放置旋转的文本？

我正在尝试让画布工作，我正在尝试做的是制作一个图像（从现有图像）并在其上放置一个文本。我希望文本在图像的左侧旋转。当我尝试旋转文本时，我在画布上再也看不到它了。Im使用以下解决方案：

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.save();
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
ctx.restore();
var image = canvas.toDataURL("image/jpeg");

使用此解决方案，我无法再看到文本。当我删除旋转并将代码转换为以下内容时，一切都正常—图像被渲染，文本被渲染到图像上

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
var image = canvas.toDataURL("image/jpeg");

有人能看到我犯的错误吗，或者有人能解决我这个问题吗

[编辑]

---

我已经制作了一个JSFIDLE来显示问题

在旋转之前，您应该始终设置旋转点。

把旋转点想象成压在一张纸上的铅笔头

旋转时，纸张将围绕笔尖点旋转

使用context.translate（x，y）设置旋转点

若要在图像的左侧旋转，请转换如下内容：

// set the rotation point

ctx.translate(6,img.height/2);

这将在图像左侧和垂直中心设置旋转点6个像素

var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0);
ctx.rotate(-0.5*Math.PI);
ctx.font = "12px Arial";
ctx.fillStyle = 'white';
ctx.textBaseline = 'top';
ctx.fillText("copyright", 0, 0);
var image = canvas.toDataURL("image/jpeg");

下面是示例代码和演示：

---

你能用这个做小提琴吗？我做了小提琴