Canvas Animation

In this article, we will learn how to create basic animation using HTML5 canvas and JavaScript.
Continuously changing the color of a Star (Twinkling of the star)
To make this work, we will first write a function that: 1. Clears the screen 2. Draws the star in a different color by going through an array of colors. The color changes will be continuous.
Step 1
We will first create a "changeColor()" method. In this method, we will create an array of colors that the star will go through.
var color = ["#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC","#FF33CC","#CC0099","#993399"];
Step 2
Assign a color to the fillStyle method, and increment the counter variable, as in the following:
ctx.fillStyle = color[counter]; counter++;
Step 3
Clear the screen so that we don't keep drawing over an already drawn star, as in the following:
ctx.clearRect(0,0,900,500);
Step 4
If we have reached the end of the color array, reset the counter to make the star twinkle again by changing the color, as in the following:
if(counter>13)
counter = 0;
Now that we have the function, we must call it repeatedly at set intervals. We will use the "setInterval()" method for this. The setInterval takes 2 parameters:
  1. The function that is to be called at regular intervals
  2. The interval in microseconds.
The following function will call the changeColor() function every 400 microseconds:
animFlag = setInterval(function() {changeColor()}, 400)
Example
  1. <!DOCTYPE html>
  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 animFlag;
  8. var counter = 0;
  10. function init() {
  11. var canvas = document.getElementById("canvas");
  12. if (canvas.getContext) {
  13. var ctx = canvas.getContext("2d");
  14. ctx.fillStyle = "#FFFFCC";
  15. animFlag = setInterval(function () { changeColor() }, 400)
  16. }
  17. }
  19. function changeColor() {
  20. var canvas = document.getElementById("canvas");
  21. if (canvas.getContext) {
  22. var ctx = canvas.getContext("2d");
  23. var colour = ["#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC", "#FF33CC", "#CC0099", "#993399"];
  24. ctx.fillStyle = color[counter];
  25. counter++
  26. ctx.clearRect(0, 0, 900, 500);
  27. ctx.beginPath();
  28. ctx.moveTo(300, 200);
  29. ctx.lineTo(335, 125);
  30. ctx.lineTo(370, 200);
  31. ctx.closePath();
  32. ctx.fill();
  33. ctx.beginPath();
  34. ctx.moveTo(335, 230);
  35. ctx.lineTo(300, 150);
  36. ctx.lineTo(365, 150);
  37. ctx.closePath();
  38. ctx.fill();
  39. if (counter > 8)
  40. counter = 0;
  41. }
  42. }
  43. </script>
  44. <title>Animation - stars changing colors</title>
  45. </head>
  46. <body onload="init();">
  47. <canvas id="canvas" width="900" height="500"></canvas>
  48. </body>
  49. </html>
Output
First Image
star3.jpg
Second Image
star.html.jpg
Third Image
star1.jpg
And so on; we will get 7 different color stars.