While trying to learn some HTML5 animation I came upon this problem: while trying to rotate an image based on the mouse position on canvas the rotation point is on the top left corner instead of image center.
From limited experience I know that in flash there is an option to change the image's anchor point so the possible rotation revolves around the centerpoint instead of some corner. Is there something similar in JavaScript that allows me to rotate a loaded image around it's center?
You can specify the (x, y) origin of the rotation with the transform-origin property:
transform-origin: 50% 50%;
Though currently this still mostly requires vendor-prefixes:
-webkit-transform-origin: 50% 50%;
/* and others... */
Okay this is how I managed to get it to work:
The main.js which contains the animation loop
window.onload = function(){
/*variables*/
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
mouse = utils.captureMouse(canvas),
ship = new Ship();
ship.x = canvas.width / 2;
ship.y = canvas.with / 2;
/*animation loop*/
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
//clear rect tyhjentää koko canvasin
context.clearRect(0, 0, canvas.width + 1, canvas.height + 1);
var dx = mouse.x - alus.x,
dy = mouse.y - alus.y;
ship.rotation = Math.atan2(dy, dx);
ship.draw(context);
})();
}
Ship.js
function Ship(){
this.x = 0;//x-sjainti
this.y = 0;//y-sijainti
this.rotation = 0;
this.img = new Image();
this.img.src = "resources/img/ship2.png";
this.imgW = this.img.width;
this.imgH = this.img.height;
}
Ship.prototype.draw = function(context){
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.drawImage(this.img, this.imgW / 2 * -1, this.imgH / 2 * -1);
context.restore();
}
The key points are imgW and imgH. As seen in the drawImage-method the location where the image is drawn is set to half the dimension of the object backwards. This after trying it out seemed to have centered the rotation point.
