Post
Ask Question

Image Changing With Rotating Canvas in HTML5

Automatic Image Changing in Rotating Canvas in HTML5

 

Introduction

 
In this article, I describe how to change images while rotating the canvas in HTML5.
 
In this article, we simply placed birds on the canvas, then move the canvas using a stylesheet to allow the birds to roam across the page.
 
Browser Support
 
It is supported by all major browsers such as Internet Explorer 9, Firefox 3.6+, Safari 4+ and Chrome, etc.
 
Procedure for changing the image in canvas during rotation
 
Step 1
 
We first define the element using HTML5 canvas. The height and width attributes sets the canvas width and height. To add the position use the style attribute.
 
<canvas id="can" height="450" width="450" style="position: absolute; left: 20px; top: 225px"></canvas>
 
Step 2
 
In order to interact with this canvas through JavaScript, we will need to first get the element by Id and then create a context. 
  1. <script type="text/javascript">  
  2.     var can = document.getElementById('can');  
  3.     var ctx = can.getContext("2d");  
  4. </script> 
In the beginning of the script tag we declare some variables as:
  1. var can, ctx,  
  2. arr = [],  
  3. counter = 0, rot = 0,  
  4. centerX = -170, centerY = -125,  
  5. canX = 20, canY = 225; 
Step 3
 
In the following method, we first create a draw() method. In this, we will first define a clearRect() method. The clearRect() method clears the specified pixels. Since the Canvas has the states translate and rotate, the save() method and restore() method are called in order to save and restore the canvas states.
 
Canvas states are stored in a stack whenever the save() method is called, and the last saved state is popped up from the stack whenever the restore() method is called. In this we draw rotated: translate to x,y; rotate; draw at 0,0, offset to center.
  1. function draw()  
  2. {  
  3.    ctx.clearRect(0, 0, can.width, can.height);  
  4.    ctx.save();  
  5.    ctx.translate(can.width / 2, can.height / 2);  
  6.    ctx.rotate(rot);  
  7.    ctx.drawImage(arr[counter], centerX, centerY);  
  8.    ctx.restore();  
  9. } 
Step 4
 
In the following code, we will create a move() method for moving the canvas on the page. In this step, we use the CSS style for moving the canvas.
  1. function move()  
  2. {  
  3.      canX += 1;  
  4.      canY -= 2;  
  5.      if (canY < -60)  
  6.          canY = -60;  
  7.      if (canX > 450)  
  8.          canX = 450;  
  9.      can.style.left = canX;  
  10.      can.style.top = canY;  
  11. } 
Above the CSS style that I have used to move the canvas is:
  1. can.style.left = canX;  
  2. can.style.top = canY; 
Step 5
 
In the following code we will create a twinkle() method. In this method the images blink quickly. We will check the value of the counter by applying an if condition. In this condition if(counter==4) then make the counter to zero and apply rotation(rot=.06). After that call the draw() method for drawing the birds, move() method for moving the canvas and the setTimeout() method for repeating continuously.
  1. function twinkle()  
  2. {  
  3.    var wait = 500;  
  4.    counter++;  
  5.    if (counter == 4)  
  6.    {  
  7.        counter = 0;  
  8.        wait += Math.random() * 1500;  
  9.        rot += .06;  
  10.     }  
  11.     draw();  
  12.     move();  
  13.     setTimeout(twinkle, wait);  
  14. } 
Step 6
 
Now will create the init() method. In this method, we will put the images into an array. We will also set the shadow color, Offset and blur for these images. Then we will call the draw() method to draw on the fly. Then we will wait for a few seconds and after that, we begin the animation.
  1. function init()  
  2. {  
  3.     can = document.getElementById("can");  
  4.     ctx = can.getContext("2d");  
  5.     arr[0] = document.getElementById("a1");  
  6.     arr[1] = document.getElementById("a2");  
  7.     arr[2] = document.getElementById("a3");  
  8.     arr[3] = document.getElementById("a4");  
  9.     ctx.shadowColor = "rgba(60, 60, 60, .4)";  
  10.     ctx.shadowBlur = "6";  
  11.     ctx.shadowOffsetX = "20";  
  12.     ctx.shadowYOffsetY = "30";  
  13.     draw();  
  14.     var t = setTimeout(twinkle, 5000);  
  15. } 
Step 7
 
In the following code inside the body tag onload we will call the init() method. We also define the image source inside a body tag.
  1. <body onload="init()" onmousedown="moveToMouse()">  
  2.     <img id="a1" style="display: none" src="images.jpg">  
  3.     <img id="a2" style="display: none" src="index.jpg">  
  4.     <img id="a3" style="display: none" src="index1.jpg">  
  5.     <img id="a4" style="display: none" src="index2.jpg">  
  6.     <canvas id="can" height="450" width="450" style="position: absolute; left: 20px; top: 225px"></canvas>  
  7. </body> 
Example
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Free Roaming Canvas</title>  
  5.     <script type="text/javascript">  
  6.         var can, ctx,  
  7.             arr = [],  
  8.             counter = 0, rot = 0,  
  9.             centerX = -170, centerY = -125,  
  10.             canX = 20, canY = 225;  
  11.    
  12.         function init()  
  13.         {  
  14.             can = document.getElementById("can");  
  15.             ctx = can.getContext("2d");  
  16.             arr[0] = document.getElementById("a1");  
  17.             arr[1] = document.getElementById("a2");  
  18.             arr[2] = document.getElementById("a3");  
  19.             arr[3] = document.getElementById("a4");  
  20.             ctx.shadowColor = "rgba(60, 60, 60, .4)";  
  21.             ctx.shadowBlur = "6";  
  22.             ctx.shadowOffsetX = "20";  
  23.             ctx.shadowYOffsetY = "30";  
  24.             draw();  
  25.             var t = setTimeout(twinkle, 5000);  
  26.         }  
  27.    
  28.         function twinkle()  
  29.         {  
  30.             var wait = 500;  
  31.             counter++;  
  32.             if (counter == 4)  
  33.             {  
  34.                 counter = 0;  
  35.                 wait += Math.random() * 1500;  
  36.                 rot += .06;  
  37.             }  
  38.             draw();  
  39.             move();  
  40.             setTimeout(twinkle, wait);  
  41.         }  
  42.    
  43.         function draw()  
  44.         {  
  45.             ctx.clearRect(0, 0, can.width, can.height);  
  46.             ctx.save();  
  47.             ctx.translate(can.width / 2, can.height / 2);  
  48.             ctx.rotate(rot);  
  49.             ctx.drawImage(arr[counter], centerX, centerY);  
  50.             ctx.restore();  
  51.         }  
  52.    
  53.         function move()  
  54.         {  
  55.             canX += 1;  
  56.             canY -= 2;  
  57.             if (canY < -60)  
  58.                 canY = -60;  
  59.             if (canX > 450)  
  60.                 canX = 450;  
  61.             can.style.left = canX;  
  62.             can.style.top = canY;  
  63.         }  
  64.     </script>  
  65. </head>  
  66. <body onload="init()" onmousedown="moveToMouse()">  
  67.     <img id="a1" style="display: none" src="images.jpg">  
  68.     <img id="a2" style="display: none" src="index.jpg">  
  69.     <img id="a3" style="display: none" src="index1.jpg">  
  70.     <img id="a4" style="display: none" src="index2.jpg">  
  71.     <canvas id="can" height="450" width="450" style="position: absolute; left: 20px; top: 225px"></canvas>  
  72. </body>  
  73. </html> 
Output
 
Automatic Image changing in Rotation Canvas on the page
 
Image 1
 
bird1.jpg
 
Image 2
 
bird2.jpg
 
Image 3
 
bird3.jpg
 
Image 4
 
bird4.jpg


Similar Articles