0

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();
     }
rckz
  • 1
  • Rotate rotates around the origin. If you rotate by 90 degrees, the image will be drawn completely outside of the canvas. Habe you tried using `context.translate(canvas.width/2,canvas.height/2);` or similar before the `rotate()` call? This will change the origin of the rotation. – R D Apr 01 '17 at 07:35
  • Related [stackoverflow question](http://stackoverflow.com/questions/17411991/html5-canvas-rotate-image). – R D Apr 01 '17 at 07:37
  • thank you, dude! it was really off of canvas. :) – rckz Apr 01 '17 at 07:43

1 Answers1

-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;
user8081186
  • 1
  • 1