CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-canvas
user1184100
user1184100

Reputation: 6894

Issues in canvas image rotation

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

};

Upvotes: 0

Views: 1447

Answers (2)

Garlov
Garlov

Reputation: 124

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();

Upvotes: 0

GameAlchemist
GameAlchemist

Reputation: 19294

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/

Upvotes: 1

Related Questions