Javascript JS画布图像旋转加载

我试图在加载图像时在画布上旋转图像，但它没有显示，并且没有javascript错误

代码如下：

 function drawImage(pictureId, direction, ctx, posX, posY) {
     var image = document.createElement("img");
     //i set the image src here
     image.onload = function () {                
                drawRotated(image, direction, posX, posY);
            } 
        }
    function drawRotated(image, direction, posX, posY) {
            ctx.save();
            ctx.rotate((direction*90)*(Math.PI/180));                            
            ctx.drawImage(image, posX, posY);
            ctx.restore();
     }

---

旋转围绕原点旋转。如果旋转90度，图像将完全在画布外部绘制。您是否尝试过使用context.translatecanvas.width/2、canvas.height/2；还是在轮换电话之前？这将改变旋转的原点。相关。谢谢你，伙计！这真是太离谱了

<div class="avatar">
    <img class="img-responsive profile-img" ng-if="jc.profile.get('image')" ng-src="{{jc.profile.get('image')}}">
    <img class="img-responsive profile-img" ng-if="!jc.profile.get('image')" src="assets/images/man.png">
</div>

    this.rotateImage = function () {
        if (this.user.get('imageRotation'))
            delta = parseInt(this.user.get('imageRotation'))
        delta += 90
        delta = delta % 360
        document.getElementById("image").style.webkitTransform = "rotate(" + delta + "deg)";
        return delta
    }


this.user = User;
if (this.user.get('imageRotation') && $location.$$path.toString().includes('/user/'))
    onLoadRotateImage(this.user.get('imageRotation'))
// tools
this.tools = User.tools;