JSキャンバス画像回転オンロード

Question

画像が読み込まれたときキャンバス上で画像を回転しようとしていますが、表示されず、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(); 
    } 

Answer 1

<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> 

VARデルタ= 0

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;