Issues in canvas image rotation

Question

I've created a basic HTML5 image slider where images move from top to bottom in a canvas. I want all the images rotated at angle of 5 degrees. When I tried it out there seems to be some distortion to the canvas and the image is not properly rotated.

I've tried the method for rotation mentioned in the below post

How do I rotate a single object on an html 5 canvas?

Fiddle - http://jsfiddle.net/DS2Sb/

Code

this.createImage = function (image, width, height) {

    var fbWallImageCanvas = document.createElement('canvas');
    var fbWallImageCanvasContext = fbWallImageCanvas.getContext('2d');
    fbWallImageCanvas.width = width;
    fbWallImageCanvas.height = height;

    fbWallImageCanvasContext.save();
    fbWallImageCanvasContext.globalAlpha = 0.7;
    this.rotateImage(image, 0, 0, width, height, 5, fbWallImageCanvasContext);
    fbWallImageCanvasContext.drawImage(image, width, height);
    fbWallImageCanvasContext.restore();
    return fbWallImageCanvas;
};

this.rotateImage = function (image, x, y, width, height, angle, context) {

    var radian = angle * Math.PI / 180;
    context.translate(x + width / 2, y + height / 2);
    context.rotate(radian);
    context.drawImage(image, width / 2 * (-1), height / 2 * (-1), width, height);
    context.rotate(radian * (-1));
    context.translate((x + width / 2) * (-1), (y + height / 2) * (-1));

};

Your code will draw the image twice to an offscreen canvas: one rotated, one not rotated. Is that what you want the code to do? — markE, Oct 29 '13 at 13:25

score 1 · Accepted Answer · answered Oct 29 '13 at 13:09

The distortion you see is due to the fact that a rotated image will only fit in a larger canvas. So what we see is a rectangle view on a rotated image.
The computations are not that easy to get things done properly, but instead of pre-computing the rotated image, you might rotate them just when you draw them, which lets you also change the angle whenever you want (and opacity also btw).

So i simplified createImage, so that it just stores the image in a canvas (drawing a canvas is faster than drawing an image) :

this.createImage = function(image , width, height) {
    var fbWallImageCanvas = document.createElement('canvas');
    fbWallImageCanvas.width = width;
    fbWallImageCanvas.height = height;  
            var fbWallImageCanvasContext = fbWallImageCanvas.getContext('2d');
    fbWallImageCanvasContext.drawImage(image,0,0);
    return fbWallImageCanvas;
};

And i changed drawItem so it draws the image rotated :

this.drawItem = function(ct) {
        var angle = 5;
        var radian = angle * Math.PI/180;
        ct.save();
        ct.translate(this.x + this.width/2 , this.y + this.height/2);
        ct.rotate(radian);
        ct.globalAlpha = 0.7;
        ct.drawImage(fbc, - this.width/2, -this.height/2 , this.width, this.height);
        ct.restore();
        this.animate();
    };

You'll probably want to refactor this, but you see the idea.

fiddle is here : http://jsfiddle.net/DS2Sb/1/

score 0 · Answer 2 · edited Dec 06 '15 at 03:58

Here is a link to a small html5 tutorial I created a while ago:

https://bitbucket.org/Garlov/html5-sidescroller-game-source

And here is the rotate code:

// save old coordinate system
ctx.save(); 
// move to the middle of where we want to draw our image
ctx.translate(canvas.width/2, canvas.height-64);
// rotate around that point
ctx.rotate(0.02 * (playerPosition.x));
//draw playerImage
ctx.drawImage(playerImage, -playerImage.width/2, -playerImage.height/2);
//and restore coordniate system to default
ctx.restore();

Issues in canvas image rotation

2 Answers2