Question

73

Rotate an image around its center in canvas

rated 0 times [ 74] [ 1] / answers: 1 / hits: 47759 / 14 Years ago, sun, december 12, 2010, 12:00:00

I'm trying to do my first image animation on canvas. I want the image to rotate but something is not correct in my code. Any ideas? This is all in a jquery document ready:

var canvas = document.getElementById('logobg1');  

    var ctx = canvas.getContext('2d');



    var img = new Image();   // Create new Image object

    img.src = 'images/containerbg.png'; // Set source path // set img src



    img.onload = function(){ // when image loads

        ctx.drawImage(img,0,0);

        setInterval(function() {

            ctx.save();

            ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height);

            ctx.drawImage(img,0,0);

            ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); // set canvas context to center

            ctx.rotate(Math.PI / 180 * 0.5); // 1/2 a degree

            ctx.restore();

        }, 16);

    }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gabriel

Add To Favorites

Follow

Total Points: 323

Total Questions: 107

Total Answers: 108

Location: Federated States of Micronesia

Member since Sun, May 16, 2021

3 Years ago

answered 14 Years ago jazminkyrap · Accepted Answer

just change the order of your code, i.e.,

ctx.rotate(...);



ctx.drawImage(...);

See a working example http://jsbin.com/owuyiq/

$(function () {

    var canvas = document.getElementById('logobg1');

    var ctx = canvas.getContext('2d');

    var img = new Image();



    var ang = 0; //angle

    var fps = 1000 / 25; //number of frames per sec

    img.onload = function () { //on image load do the following stuff

        canvas.width = this.width << 1; //double the canvas width

        canvas.height = this.height << 1; //double the canvas height

        var cache = this; //cache the local copy of image element for future reference

        setInterval(function () {

            ctx.save(); //saves the state of canvas

            ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the canvas

            ctx.translate(cache.width, cache.height); //let's translate

            ctx.rotate(Math.PI / 180 * (ang += 5)); //increment the angle and rotate the image 

            ctx.drawImage(img, -cache.width / 2, -cache.height / 2, cache.width, cache.height); //draw the image ;)

            ctx.restore(); //restore the state of canvas

        }, fps);

    };



    img.src = 'http://i.stack.imgur.com/Z97wf.jpg?s=128'; //img

});