Open In App

How to Draw Dynamic Animations in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to build dynamic animations on our webpage using the canvas elements in HTML5. The main purpose of this element is to create graphics from scratch or to manipulate it. It can be used to manipulate canvas using JavaScript API and create dynamic animations and graphics which react to the user’s interaction. UI for web applications can also be constructed using it.

Syntax:

<canvas id="myCanvas" width="500" height="500"> 
    ... 
</canvas>

We can achieve dynamic animation in HTML by using the following steps one at a time:

Step 1: Creating Animation Loop:

let canvas = $("#myCanvas");
// Rendering 2-D canvas on webpage
let context = canvas.get(0).getContext("2d");
let Width = canvas.width();
let Height = canvas.height();
function animate() {
    // Creates endless loop by calling animate 
    // function again in 35 milliseconds
    setTimeout(animate, 35);
};
animate(); // Calling the function animate

 

Step 2: Logic to deal with buttons to interact with animation:

let playAnimation = true;
let startButton = $("#start");
let stopButton = $("#stop");
startButton.hide(); // Disabled Start button
startButton.click(() => {
   $(this).hide();
   stopButton.show();
   playAnimation = true;
   animate();
});
stopButton.click(() => {
   $(this).hide();
   startButton.show();
   playAnimation = false;
});

Step 3: Selecting and randomizing shapes: 

let Shape = function (x, y, width, height) {
   this.x = x;
   // Define starting position of the shape
   this.y = y; 
   // Define height and width of the shape 
   this.width = width; 
   this.height = height;
};

// To randomize the position and size of each shape
for (let i = 0; i < 5; i++) {
   let x = Math.random() * 200;
   let y = Math.random() * 200;
   let width = height = Math.random() * 50;
   shapes.push(new Shape(x, y, width, height));
};
context.fillRect(tmpShape.x, tmpShape.y, 
                 tmpShape.width, tmpShape.height); 

Step 4: Changing directions:

tmpShape.x += 2; // Increment x co-ordinate by 2
tmpShape.y + // Increment y co-ordinate by 1
// For unpredictable patterns
tmpShape.x += Math.random() * 3 + 2;
tmpShape.y += Math.random() * 3 - 1; 

The above four steps constitute the basic structure to create dynamic animations on canvas. According to the requirement of animation required, we need to build logic and code the logic in the animate() function. Given below is an example of Bouncing Objects Off a Canvas Boundary.

Example: This is the complete example that will illustrate how to Draw Dynamic Animations in HTML5.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>How to Build Dynamic Graphics in HTML5</title>
 
    <script type="text/javascript" src=
    </script>
</head>
 
<body>
    <canvas width="300" height="300" id="Canvas">
    </canvas>
 
    <!-- Buttons to control the animation loop -->
    <div>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
 
    <script>
        let canvas = $("#Canvas");
        let context = canvas.get(0).getContext("2d");
        context.fillStyle = "green";
 
        // Width of the animation
        let Width = canvas.width();
 
        // Height of the animation
        let Height = canvas.height();
        let playAnimation = true;
        let startButton = $("#start");
        let stopButton = $("#stop");
 
        // Code to disable Start button
        startButton.hide();
        startButton.click(function () {
            $(this).hide();
            stopButton.show();
            playAnimation = true;
            animate();
        });
 
        // Code to disable Stop button
        stopButton.click(function () {
            $(this).hide();
            startButton.show();
            playAnimation = false;
        });
 
        // Code to define width and height of the shape
        let Shape = function (x, y, width, height) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
 
            // No reversal of direction in
            // the x-axis initially
            this.reverseX = false;
            this.reverseY = false;
        };
 
        // Code to generate ten random
        // shapes for animation loop
        let shapes = new Array();
        for (let i = 0; i < 10; i++) {
            let x = Math.random() * 300;
            let y = Math.random() * 300;
            let width = height = Math.random() * 30;
 
            // Adding random shapes to canvas
            shapes.push(new Shape(x, y, width, height));
        };
        function animate() {
            context.clearRect(0, 0, Width, Height);
            let shapesLength = shapes.length;
            for (let i = 0; i < shapesLength; i++) {
                let tmpshape = shapes[i];
                if (!tmpshape.reverseX) {
 
                    // Increment the x co-ordinate by 3 units
                    tmpshape.x += 3;
                } else {
 
                    // Decrement the x co-ordinate by 3 units
                    tmpshape.x -= 3;
                };
                if (!tmpshape.reverseY) {
 
                    // Increment the y co-ordinate by 3 units
                    tmpshape.y += 3;
                } else {
 
                    // Decrement the y co-ordinate by 3 units
                    tmpshape.y -= 3;
                };
 
                // Code for shapes to bounce off the boundary
                context.fillRect(tmpshape.x, tmpshape.y,
                    tmpshape.width, tmpshape.height);
                if (tmpshape.x < 0) {
                    tmpshape.reverseX = false;
                } else if (tmpshape.x + tmpshape.width > Width) {
 
                    // Reverse the direction of shape if position of
                    // shape is greater than width of canvas
                    tmpshape.reverseX = true;
                };
                if (tmpshape.y < 0) {
                    tmpshape.reverseY = false;
                } else if (tmpshape.y + tmpshape.height > Height) {
 
                    // Reverse the direction of shape if position of
                    // shape is greater than height of canvas
                    tmpshape.reverseY = true;
                };
            };
            if (playAnimation) {
                setTimeout(animate, 35);
 
            };  // Runs animate() function infinitely
            // after every 35ms
        };
        animate();
    </script>
</body>
 
</html>


Output:

Bouncing objects off a canvas boundary

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 16 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads