How do I rotate a single object on an html 5 canvas?

by

I ran into the same problem in a recent project (where I kicked rotating aliens all over the place). I just used this humble function that does the same thing and can be used the same way as ctx.rotate but can be passed an angle. Works fine for me.

function drawImageRot(img,x,y,width,height,deg){
    // Store the current context state (i.e. rotation, translation etc..)
    ctx.save()

    //Convert degrees to radian 
    var rad = deg * Math.PI / 180;

    //Set the origin to the center of the image
    ctx.translate(x + width / 2, y + height / 2);

    //Rotate the canvas around the origin
    ctx.rotate(rad);

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

    // Restore canvas state as saved from above
    ctx.restore();
}

Yay, my first answer!

More Related Contents:

  1. Body animation isn’t smooth
  2. how to animate drawing lines on canvas
  3. How do I add a simple onClick event handler to a canvas element?
  4. Get pixel color from canvas, on mousemove
  5. Why does canvas.toDataURL() throw a security exception?
  6. How to add image to canvas
  7. Simulation background-size: cover in canvas
  8. how to save canvas as png image?
  9. Does HTML5/Canvas Support Double Buffering?
  10. How do I re-trigger a WebKit CSS animation via JavaScript?
  11. Uploading ‘canvas’ image data to the server
  12. html 5 canvas LineTo() line color issues
  13. HTML5 Canvas camera/viewport – how to actually do it?
  14. HTML5 canvas ctx.fillText won’t do line breaks?
  15. Is it possible to programmatically detect size limit for data url?
  16. What is the current state of the art in HTML canvas JavaScript libraries and frameworks? [closed]
  17. How to use Google fonts in Canvas when Drawing DOM objects in SVG?
  18. Using Canvas to animate a sorting algorithm in JS
  19. Detect if user clicks inside a circle
  20. Why does HTML Canvas getImageData() not return the exact same values that were just set?
  21. Javascript function to Rotate a base 64 image by X degrees and return new base64
  22. Drawing rotated text on a HTML5 canvas
  23. canvas.toDataURL() Security Error The operation is insecure
  24. HTML5 Canvas Circle Text
  25. HTML5 Dynamically create Canvas
  26. Snap edges of objects to each other and prevent overlap
  27. Image Manipulation – add image with corners in exact positions
  28. HTML5 Canvas translate(0.5,0.5) not fixing line blurryness
  29. Converting Chart.js canvas chart to image using .toDataUrl() results in blank image
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment