Post
Ask Question

Rotating an Image on Canvas in HTML 5

Rotating an Image on a Canvas using HTML5

 
This article describes how to rotate images using JavaScript and HTML5.
 
It's not as simple as just "rotating an image". It's more like rotating the canvas, then set the image's orientation, then resetting the canvas.
 
In this example, I will show how to rotate an image around its center point in HTML5.
 
NOTE: It is important to remember that in canvas, the last transformation that you write is executed first. So if you are doing many transformations then you must write them in reverse order.
 
Step 1
 
Load the image using the following:
  • Specify an image to be loaded image = new Image();
  • Some onload event handler after it has loaded image.onload = loadingComplete; image.src = "C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg";
Note: To check that the image has loaded completly:
 
image.readyState == 'complete'
 
Step 2-
 
Since I created the canvas dynamically, ensure to insert it into the document before calling: "canvas.getContext('2d');".
 
Step 3
  • So first save the canvas as it is.
  • Then the translate line makes the "start" to translate to the center point of our image.
  • Then perform the rotation of the actual canvas the amount you want the image to rotate.
  • Finally, we draw the image, but because the start of the image has changed place, it needs to start drawing at a different place; which is half of the width of the image to the left, and half of the height of the image from the top.
  • It then brings the canvas back to where it was before, leaving the drawn image still showing as rotated.
  • At last, we restore the content and ready for the next loop.
Example :
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script type="application/javascript">  
  7.         var surface;  
  8.         var image;  
  9.         var angle = 0;  
  10.    
  11.         function drawCanvas()  
  12.         {  
  13.             // Get our Canvas element  
  14.             surface = document.getElementById("myCanvas");  
  15.    
  16.             if (surface.getContext)  
  17.             {  
  18.                 // If Canvas is supported, load the image  
  19.                 image = new Image();  
  20.                 image.onload = loadingComplete;  
  21.                 image.src = "C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg";  
  22.             }  
  23.         }  
  24.    
  25.         function loadingComplete(e)  
  26.         {  
  27.             // When the image has loaded begin the loop  
  28.             setInterval(loop, 25);  
  29.         }  
  30.    
  31.         function loop()  
  32.         {  
  33.             // Each loop we rotate the image  
  34.    
  35.             var surfacesurfaceContext = surface.getContext('2d');  
  36.    
  37.             // Clear the canvas to White  
  38.             surfaceContext.fillStyle = "#ffffff";  
  39.             surfaceContext.fillRect(0, 0, surface.width, surface.height);  
  40.    
  41.             // Save the current context  
  42.             surfaceContext.save();  
  43.             // Translate to the center point of our image  
  44.             surfaceContext.translate(image.width * 0.5, image.height * 0.5);  
  45.             // Perform the rotation  
  46.             surfaceContext.rotate(DegToRad(angle));  
  47.             // Translate back to the top left of our image  
  48.             surfaceContext.translate(-image.width * 0.5, -image.height * 0.5);  
  49.             // Finally we draw the image  
  50.             surfaceContext.drawImage(image, 0, 0);  
  51.             // And restore the context ready for the next loop  
  52.             surfaceContext.restore();  
  53.    
  54.             angle++;  
  55.         }  
  56.    
  57.         function DegToRad(d)  
  58.         {  
  59.             // Converts degrees to radians  
  60.             return d * 0.01745;  
  61.         }  
  62.     </script>  
  63.     <title>Rotating an inage on canvas<title>  
  64. </head>  
  65. <body onload="drawCanvas();">  
  66.     <div>  
  67.         <canvas id="myCanvas" width="30" height="30">  
  68.             <p>Your browser doesn't support canvas.</p>  
  69.         </canvas>  
  70.     </div>  
  71. </body>  
  72. </html> 
Output
rotate1.jpg
rot.jpg
rota.jpg
rotat.jpg


Similar Articles