Html5 Canvas Rotate Image

Making the image dance to your tune

To make the image move and wiggle with button clicks, let's get those hands busy:

let angle = 0; // Our starting dance position, facing forward
const img = new Image();
img.onload = function() { drawRotated(angle); }; // Wait for our star (image) to arrive!  
img.src = 'image.jpg'; // Here comes the star of our show! 

// Get those left feet moving!
document.getElementById('rotateLeft').addEventListener('click', function() {
    angle -= 45; // One, two, three, step to the left! 
    drawRotated(angle);  // Repeat the dance routine with the new step. Dance, image, dance!
});

// Now, let’s get our right feet in the groove!
document.getElementById('rotateRight').addEventListener('click', function() {
    angle += 45; // One, two, three, step to the right!  
    drawRotated(angle);  // Show them how it's done!
});

// Our groovy dance choreography
function drawRotated(degrees) {
    ctx.clearRect(0,0,canvas.width,canvas.height);  // First, let's clear the dance floor
    ctx.save();  // Remember where we are, this dance can get us dizzy!
    ctx.translate(canvas.width/2,canvas.height/2);  // Move the spotlight to the center
    ctx.rotate(degrees*Math.PI/180);  // Start rotation! Remember to multiply by PI / 180 to speak in ‘rotation language’
    ctx.drawImage(img,-img.width/2,-img.height/2);  // Draw our star!!
    ctx.restore();  // Restore the stage for the next routine. 
}


Tweaking center stage (advanced)

Sometimes it's not enough to just dance; we want a hoedown throwdown of image rotations. So let's amp it up!

No more crooked spins

What if our star (image) isn't twirling smoothly? We'll fix that with a smooth requestAnimationFrame move:

function animateRotation() {
    angle += 1; // Add more fun to the party!
    drawRotated(angle); // Show us your moves, star!
    requestAnimationFrame(animateRotation); // Keep the dance floor hot!
}
animateRotation(); // Salsa night has begun!


Work those props!

Our canvas is the dance floor! But if it's too small, or too big, our star might stumble! So it's time to keep our canvas size in check:

if (angle % 180 !== 0) { // If our star is really spinning out!
    canvas.width = img.height;  // Set the canvas width to image height
    canvas.height = img.width;  // Reverse the canvas height to image width
} else { // Our star's moves are normie, phew!
    canvas.width = img.width;
    canvas.height = img.height;
}
drawRotated(angle);


Jump, and make the world spin!

For our daring diva image, who wants more than rotations, we give you... setTransform flip, skip and warp jumps!

ctx.save(); // Remember our star's steps
ctx.setTransform(cos, sin, -sin, cos, x, y); // Transform the dance floor, not just the dancer!
ctx.drawImage(img, -img.width / 2, -img.height / 2); // The world's a blur! Keep dancing, star!
ctx.restore(); // Easy there, star, we're done!


Backstage Pass

Behind the stage, there’s often a lot more going on. Like if the image takes too long to load, the star is late for the show, or sometimes, we have a diva on our hands who refuses to dance!

Ensuring the star is ready

We must always wait for our star (image) to get ready before we put her on the spot:

img.onload = function() {
    drawRotated(angle);
};


Dance floor for the star

Sometimes the dance floor (canvas) might not be comfortable for the star (image). Adjust it to her liking:

canvas.width = img.width;
canvas.height = img.height;


Dancing with angles

You never know when your star might want to spin out of control. Have your angles in control (angle%360 can ensure you rotate within a 0-360 range):

angle = angle % 360;


Showtime!

And finally, let's dance. Centralize your rotation functionality using the drawRotated function:

function drawRotated(angle) { ... }  // And we dance!
