javascript - Html 5 Rotate image inside the Canvas -

I need to rotate an image inside a canvas..I have gone and saw similar questions in the StackVaverflow.

1. I can not do the same object to move inside the canvas

2. I can only do the same canvas Can turn

3. So I have to translate the center of the object and then rotate the canvas.

I have followed the same stuff, but I have been killed by translating the image into the center. I am using the code below. Here's JSfield. It is moving on a whole canvas even if there is an image .. Some make me a guide where I am wrong. Thanks

  // Hero Canvas Ball = New Hero (); Var angle = 0; Holocaust = document. CreateElement ("canvas"); Herocanvas.width = herocanvas.width = 500; Herocanvas.height = herocanvas.height = 500; Heroocatax = heroconavategatecontite ('2d'); Document.body.appendChild (herocanvas); Var requestAnimFrame = window.request animationframe || Window.webkitRequestAnimationFrame || Window.mozRequestAnimationFrame || Window.msRequestAnimationFrame || Window.oRequestAnimationFrame; Var imgSprite = new image (); ImgSprite.src = 'http://i.imgur.com/WTgOHGg.png'; ImgSprite.addEventListener ('load', init, false); Function init () {startloop (); } Function startloop () {heroctx.save (); // Protects the canvas state // Clear Canvas Herotics Translestate (Ballravex, Ballroy Y); // Let's join heroocax. Translate Rotate (Math.PI / 180 * (ang + = 4)); Ball.draw (); // picture here heroctx.restore (); RequestAnimFrame (startloop); } Function Hero () {this.srcX = 0; This. SrcY = 500; This.drawX = 220; This.drawY = 200; This.width = 100; This.height = 40; This.speed = 5; This.isUpKey = false; This.isRightKey = false; This.isDownKey = false; This.isLeftKey = false; } Hero.prototype.draw = function () {heroctx.drawImage (imgSprite, this.srcX, this.srcY, this.width, this.height, this.drawX, this.drawY, this.Wuddth, this.height); }; Function ClearBarBog () {Hierktix.Clarrakt (0, 0, 0, 50000); }  

People who can not read the full code. Please check the startloop () , check the main infinite loop. DrawX and ball.drawY have X and Y position of image inside the canvas

Hero's DrawX and drawY need to be updated has been updated to the new coordinate system of canvas, if you want to be in the middle of the canvas, then it should be 0,0.

Something like this: jsfiddle.net/J6Pfa/3