Explosion Animation in Canvas

01 Feb, 2021
Explosion animation can be created using canvas in HTML.
Approach: At first, we have to create a canvas element in HTML and get its reference in JavaScript. All the elements and animations are controlled using JavaScript functions. Some steps required are:
Use the canvas methods to get the canvas and the context.
Decide the color, pattern, and gradient for text and particle object.
Decide and draw the shape for animation or frame rendering
Clear the previous canvas.
Save the canvas after transformations for the original state
Restore the canvas before drawing new frameWe can create many particles and animate them in random directions which fades out after some time. 
HTML code: 
HTML
<!DOCTYPE html><html>  <head>    <style>        * {            padding: 0;            margin: 0;            box-sizing: border-box;            ;        }                  body {            overflow: hidden;        }    </style></head>  <body>      <canvas id="myCanvas"></canvas>      <script>          /* Get the canvas  */        var canvas = document.getElementById("myCanvas");                  /* Get the height and width of the window */        canvas.height = window.innerHeight;        canvas.width = window.innerWidth;                  /* Get the 2D context of the canvas  */        var ctx = canvas.getContext("2d");                  /* Fills or sets the color,gradient,pattern */        ctx.fillStyle = "white";        ctx.fillRect(0, 0, canvas.width, canvas.height);        ctx.font = "50px Arial";        ctx.fillStyle = "green";                  /* Writes the required text  */        ctx.fillText("GFG", 500, 350)        let particles = [];                  /* Initialize particle object  */        class Particle {            constructor(x, y, radius, dx, dy) {                this.x = x;                this.y = y;                this.radius = radius;                this.dx = dx;                this.dy = dy;                this.alpha = 1;            }            draw() {                ctx.save();                ctx.globalAlpha = this.alpha;                ctx.fillStyle = 'green';                                  /* Begins or reset the path for                    the arc created */                ctx.beginPath();                                  /* Some curve is created*/                ctx.arc(this.x, this.y, this.radius,                         0, Math.PI * 2, false);                  ctx.fill();                                  /* Restore the recent canvas context*/                ctx.restore();            }            update() {                this.draw();                this.alpha -= 0.01;                this.x += this.dx;                this.y += this.dy;            }        }                  /* Timer is set for particle push             execution in intervals*/        setTimeout(() => {            for (i = 0; i <= 150; i++) {                let dx = (Math.random() - 0.5) * (Math.random() * 6);                let dy = (Math.random() - 0.5) * (Math.random() * 6);                let radius = Math.random() * 3;                let particle = new Particle(575, 375, radius, dx, dy);                                  /* Adds new items like particle*/                particles.push(particle);            }            explode();        }, 3000);          /* Particle explosion function */        function explode() {              /* Clears the given pixels in the rectangle */            ctx.clearRect(0, 0, canvas.width, canvas.height);            ctx.fillStyle = "white";            ctx.fillRect(0, 0, canvas.width, canvas.height);            particles.forEach((particle, i) => {                    if (particle.alpha <= 0) {                        particles.splice(i, 1);                    } else particle.update()                })                                  /* Performs a animation after request*/            requestAnimationFrame(explode);        }    </script></body>  </html>        
Output:
Explosion Animation
HTML-Canvas
HTML-Misc
JavaScript-Misc
HTML
JavaScript
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?
Form validation using HTML and JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
JavaScript | Promises
Difference Between PUT and PATCH Request
How to calculate the number of days between two dates in javascript?