HTML5画布，AngularJS，旋转图像后无法移动

Question

我正在使用此库上传和裁剪图像 http://andyshora.com/angular-image-cropper.html

我添加了向左旋转，向右旋转，水平翻转和垂直翻转的功能，以克服移动EXIF方向问题。

scope.clockwise = function() { 
                            scope.angleInDegrees+=90;
                                drawRotated(scope.angleInDegrees);
                        };

                        scope.counterclockwise = function() { 
                                scope.angleInDegrees-=90;
                                drawRotated(scope.angleInDegrees);    
                        };


                        function drawRotated(degrees){

                            ctx.clearRect(0,0,canvasWidth,canvasHeight);
                            ctx.save();
                            ctx.translate(canvasWidth/2,canvasHeight/2);
                            ctx.rotate(degrees*Math.PI/180);
                            transformPoint = untransformPoint = function(x, y) {
                                            return {
                                                x: x,
                                                y: y
                                            };
                                        };
                            ctx.drawImage($img,-$img.width/2,-$img.width/2);
                            ctx.restore();



                        }

旋转后，我无法使用旋转图像移动图像。点击图像时，它会自动显示第一个上传的图像（即旋转前）。

小提琴链接http://jsfiddle.net/x9f94yz5/1/（不是正在运行的代码）