HTML5 Canvas Animation

HTML5 Canvas Animation

There are three universal animation concepts

  1. Linear Animations.
  2. Tween Animations.
  3. Multiplane Animations.

The wire frame of this tutorial looks like below one.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

<script type="text/javascript" language="javascript">

</script>

</HEAD>
<BODY>

<canvas id="canvas1" width="550" height="450"></canvas>

</BODY>
</HTML>

And we will add the reset of the code to do canvas animation. You can have multiple canvas elements in your HTML document. At first I’m adding canvas border using CSS syntax as shown in below code.

<style>  
canvas {
border: solid red 1px;
}
</style>

Next, I'm putting come code to perform draw() action. Let’s add HTML5 button element to the document and pass co-ordinates to the draw method.

<button name="button1" onClick="drawRectangle(0,0)" id="button1">click to draw</button>

On click of the button let’s find out the canvas element and reference it to draw rectangle in it or clear the state of the canvas element.

<script type="text/javascript" language="javascript"> 

        function drawRectangle(x,y){
          var canvas = document.getElementById("canvas1"); //  referece the canvas element.
          var canvasContext = canvas.getContext('2d'); // setup 2d context.
          canvasContext.save(); // save the state of canvas if required.

Now, Let’s clear the canvas and add rectangle to it. Once we have the function in place we can call it recursively using setTimeout function of JavaScript.

The complete animation code would look like below on and you can copy paste into notepad. Save it as html and open in Chrome browser to see HTML5 simple animation in action.

<!DOCTYPE HTML>
<HTML>
<HEAD>
<style>
canvas {
border: solid red 1px;
}
</style>
    <script type="text/javascript" language="javascript">

        function drawRectangle(x,y){
          var canvas = document.getElementById("canvas1"); //  referece the canvas element.
          var canvasContext = canvas.getContext('2d'); // setup 2d context.
          canvasContext.save(); // save the state of canvas if required.
          canvasContext.clearRect(0,0,550,450);
          canvasContext.fillStyle= "rgba(0,250,0,1)";
          canvasContext.fillRect(x,20,60,60); // draw rectangle;
          canvasContext.restore();
          x = x + 10;
          var timer = setTimeout( 'drawRectangle('+ x + ',' + y +')', 200 );
        } 
    </script>

</HEAD>
<BODY>

<canvas id="canvas1" width="550" height="450"></canvas>
<button name="button1" onClick="drawRectangle(0,0)" id="button1">click to draw</button>

</BODY>
</HTML>

Basic HTML5 TagsHTML5 TutorialHTML5 With DataBaseHTML5 Video Player TutorialHtml5 Doctype HeaderHTML5 Slider control and JavaScriptASP.net HTML5 Generate Article TagHTML5 audio player tutorialYouTube Transcript FileAsp.net Convert String To ImageJQuery Animate Div Height and Width

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.