using HTML5 Canvas – rotate image about arbitrary point

by

In general, what you want to do is:

  1. Transform the context to the point on the canvas that the object should rotate about.
  2. Rotate the context.
  3. Transform the context by the negative offset within the object for the center of rotation.
  4. Draw the object at 0,0.

In code:

ctx.save();
ctx.translate( canvasRotationCenterX, canvasRotationCenterY );
ctx.rotate( rotationAmountInRadians );
ctx.translate( -objectRotationCenterX, -objectRotationCenterY );
ctx.drawImage( myImageOrCanvas, 0, 0 );
ctx.restore();

Here’s a working example showing this in action. (The math for the rotation was just experimentally hacked to find a swing amount and offset in radians that fit the quickly-sketched gauge dial.)

As may be evident, you can substitute the translate call in step #3 above with offsets to the drawImage() call. For example: 

ctx.drawImage( myImageOrCanvas, -objectRotationCenterX, -objectRotationCenterY );

Using context translation is recommended when you have multiple objects to draw at the same location.

More Related Contents:

  1. HTML5 Canvas Rotate Image
  2. Html5 canvas drawImage: how to apply antialiasing
  3. html5 – canvas element – Multiple layers
  4. How can I convert an HTML element to a canvas element?
  5. How to Copy Contents of One Canvas to Another Canvas Locally
  6. Drawing text to with @font-face does not work at the first time
  7. What’s the best way to set a single pixel in an HTML5 canvas?
  8. How to change the opacity (alpha, transparency) of an element in a canvas element?
  9. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  10. Can you take a “screenshot” of the page using Canvas?
  11. HTML5 Canvas getImageData and Same Origin Policy
  12. How can I write text on a HTML5 canvas element?
  13. Animated GIF in HTML5 canvas
  14. Chart.js canvas resize
  15. Drawing a dot on HTML5 canvas [duplicate]
  16. HTML5 Canvas background image
  17. Placing a within a
  18. Combining two or more Canvas elements with some sort of blending
  19. All html canvas shapes are given the color of the last object added
  20. What is the difference between SVG and HTML5 Canvas?
  21. Subpixel anti-aliased text on HTML5’s canvas element
  22. Draw SVG on HTML5 Canvas with support for font element
  23. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  24. “Erasing” in html5 canvas
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment