Javascript 带图像旋转的画布

现在我想旋转一张图片。如果图片没有改变。我的代码是对的。但是，如果我改变我的图片，我在画布上的图片将消失。第一个代码是不可更改的图片。最后一个代码是要更改的图片

函数旋转（方向）{
var min_步长=0；
var max_阶跃=3；
var step=$（currentSource）.attr（“step”）；
var id=$（“.active”）[0].id；
如果（步骤==null）{
步长=最小步长；
}
如果（方向=‘右’）{
step++；
阶跃>最大阶跃&（阶跃=最小阶跃）；
}否则{
步骤--；
步长<最小步长&（步长=最大步长）；
}
$（currentSource）.attr（“步骤”，步骤）；
var canvas=$（“#canvas”+id）[0]；
var width=canvas.width；
var height=canvas.height；
var src=canvas.toDataURL（“image/png”）；
var img=新图像（）；
变量度=步长*90*Math.PI/180；
var ctx=canvas.getContext（'2d'）；
开关（步骤）{
案例0：
画布宽度=高度；
画布高度=宽度；
ctx.drawImage（电流源，0，0，高度，宽度）；
打破
案例1：
画布宽度=高度；
画布高度=宽度；
旋转（度）；
ctx.drawImage（电流源，0，-高度，宽度，高度）；
打破
案例2：
画布宽度=高度；
画布高度=宽度；
旋转（度）；
ctx.drawImage（电流源，-高度，-宽度，高度，宽度）；
打破
案例3：
画布宽度=高度；
画布高度=宽度；
旋转（度）；
ctx.drawImage（电流源，-宽度，0，宽度，高度）；
打破
}
}

请提供工作片段请提供工作片段