JS Canvas Image rotation onload

Question

I'm trying to rotate an image on canvas when the image is loaded, but it's not showing up and I get no javascript errors.

here's the code:

 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 delta = 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;