How to rotate image in Canvas

Question

I have built a canvas project with https://github.com/petalvlad/angular-canvas-ext

    <canvas width="640" height="480" ng-show="activeateCanvas" ap-canvas src="src" image="image" zoomable="true" frame="frame" scale="scale" offset="offset"></canvas>

I am successfully able to zoom and pan the image using following code

        scope.zoomIn = function() {
          scope.scale *= 1.2;
        }

        scope.zoomOut = function() {
          scope.scale /= 1.2;
        }

Additionally I want to rotate the image. any help i can get with which library i can use and how can i do it inside angularjs.

Answer 1

You can rotate an image using context.rotate function in JavaScript. Here is an example of how to do this:

var canvas = null;
var ctx = null;
var angleInDegrees = 0;
var image;
var timerid;

function imageLoaded() {
    image = document.createElement("img");
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext('2d');
    image.onload = function() {
        ctx.drawImage(image, canvas.width / 2 - image.width / 2, canvas.height / 2 - image.height / 2);
    };
    image.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT7vR66BWT_HdVJpwxGJoGBJl5HYfiSKDrsYrzw7kqf2yP6sNyJtHdaAQ";
}

function drawRotated(degrees) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.rotate(degrees * Math.PI / 180);
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
    ctx.restore();
}

<button onclick="imageLoaded();">Load Image</button>
<div>
    <canvas id="canvas" width=360 height=360></canvas><br>

    <button onclick="javascript:clearInterval(timerid);
            timerid = setInterval(function() {
                angleInDegrees += 2;
                drawRotated(angleInDegrees);
            }, 100);">
        Rotate Left
    </button>

    <button onclick="javascript:clearInterval(timerid);
            timerid = setInterval(function() {
                angleInDegrees -= 2;
                drawRotated(angleInDegrees);
            }, 100);">
        Rotate Right
    </button>
</div>

Answer 2

To do it in a single state change. The ctx transformation matrix has 6 parts. ctx.setTransform(a,b,c,d,e,f); (a,b) represent the x,y direction and scale the top of the image will be drawn along. (c,d) represent the x,y direction and scale the side of the image will be drawn along. (e,f) represent the x,y location the image will be draw.

The default matrix (identity matrix) is ctx.setTransform(1,0,0,1,0,0) draw the top in the direction (1,0) draw the side in the direction (0,1) and draw everything at x = 0, y = 0.

Reducing state changes improves the rendering speed. When its just a few images that are draw then it does not matter that much, but if you want to draw 1000+ images at 60 frames a second for a game you need to minimise state changes. You should also avoid using save and restore if you can.

The function draws an image rotated and scaled around its center point that will be at x,y. Scale less than 1 makes the images smaller, greater than one makes it bigger. ang is in radians with 0 having no rotation, Math.PI is 180deg and Math.PI*0.5 Math.PI*1.5 are 90 and 270deg respectively.

function drawImage(ctx, img, x, y, scale, ang){
    var vx = Math.cos(ang) * scale; // create the vector along the image top
    var vy = Math.sin(ang) * scale; // 
    // this provides us with a,b,c,d parts of the transform
    // a = vx, b = vy, c = -vy, and d = vx. 
    // The vector (c,d) is perpendicular (90deg) to (a,b)

    // now work out e and f                                       
    var imH = -(img.Height / 2);    // get half the image height and width
    var imW = -(img.Width / 2);
    x += imW * vx + imH * -vy;        // add the rotated offset by mutliplying
    y += imW * vy + imH * vx;         // width by the top vector (vx,vy) and height by
                                  // the side vector (-vy,vx)
    // set the transform 
    ctx.setTransform(vx, vy, -vy, vx, x, y);
    // draw the image.
    ctx.drawImage(img, 0, 0);
    // if needed to restore the ctx state to default but should only
    // do this if you don't repeatably call this function.
    ctx.setTransform(1, 0, 0, 1, 0, 0); // restores the ctx state back to default
}

Answer 3

With curtesy to this page! Once you can get your hands on the canvas context:

// save the context's co-ordinate system before 
// we screw with it
context.save(); 

// move the origin to 50, 35 (for example)  
context.translate(50, 35); 

// now move across and down half the 
// width and height of the image (which is 128 x 128)
context.translate(64, 64); 

// rotate around this point
context.rotate(0.5); 

// then draw the image back and up
context.drawImage(logoImage, -64, -64); 

// and restore the co-ordinate system to its default
// top left origin with no rotation
context.restore();