CODEWITHSUNDEEP
javascripthtmlcanvas
Wolfr
Wolfr

Reputation: 5164

How would one rotate an image around itself using Canvas?

I'm having trouble roating an image around itself using Canvas.

Since you can't rotate an image you have to rotate the canvas: if I rotate the canvas by a degree the origin around which I want to rotate changes. I don't get how to track this change.

This is my current code: http://pastie.org/669023

And a demo is at http://preview.netlashproject.be/cog/

If you want to give things a shot the zipped up code and image is at http://preview.netlashproject.be/cog/cog.zip

Upvotes: 3

Views: 5961

Answers (2)

John Boker
John Boker

Reputation: 83729

it looks like this could be something you could use: http://wilq32.googlepages.com/wilq32.rollimage222

here's a test of it: http://www.antiyes.com/test/index.php

Upvotes: 1

DaMacc
DaMacc

Reputation: 701

I fixed your code:

var rotation = 0;
function draw(){

  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';

  ctx.save();
  ctx.clearRect(0,0,200,200);
  ctx.translate(100,100); // to get it in the origin
  rotation +=1;
  ctx.rotate(rotation*Math.PI/64); //rotate in origin
  ctx.translate(-100,-100); //put it back
  ctx.drawImage(cog,0,0);
  ctx.restore();
}

The important thing here is that you have to translate the image to the origin first before rotating, and translate it back!

Upvotes: 11

Related Questions