How to create Realistic Raindrops Effect with JavaScript Canvas?

JavascriptFront End TechnologyProgramming ScriptsWeb Development

With the help of JavaScript Canvas, you can create a realistic raindrop effect. This is a tutorial that will help you create such an effect.

Approach

First, you need to create a new file and save it as raindrops.js. Then, you need to copy and paste the following code into that file −

  • Step 1 − Create a canvas element.

  • Step 2 − Define the drawing context associated with the canvas.

  • Step 3 − Set the height and width of the canvas.

  • Step 4 − Define max X and max Y.

  • Step 5 − Create an array named drops to store the object of random numbers. This object will create a drop.

  • Step 6 − Loop to create random drop objects.

  • Step 7 − Define a function to draw drops.

  • Step 8 − Finally use the above-defined method to display the drops.

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; var mX = 0; var mY = 0; var drops = []; for(var i=0;i<300;i++){ drops.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*4+1, d: Math.random()*drops.length }) } function draw(){ ctx.clearRect(0, 0, W, H); for(var i=0;i<drops.length;i++){ var drop = drops[i]; ctx.beginPath(); ctx.arc(drop.x, drop.y, drop.r, 0, Math.PI*2); ctx.fillStyle = "rgba(0, 0, 255, 0.5)"; ctx.fill(); ctx.closePath(); drop.y += drop.d; if(drop.y > H){ drop.y = -1*drop.r; } drop.x += mX; drop.x += mY; } } setInterval(draw, 30);

The above code creates an array of objects, each of which represents a raindrop. The raindrops are displayed on the screen using HTML5 Canvas.

Now, you need to create a new file and save it as raindrops.css. Then, you need to copy and paste the following code into that file −

body { margin: 0px; padding: 0px; } #canvas { background: black; }

The CSS code styles the HTML document and the canvas element.

Example

Below is the complete program to create a realistic raindrops effect using JavaScript canvas.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>How to Create a Realistic Raindrops Effect With JavaScript Canvas</title> <style> body { margin: 0px; padding: 0px; } #canvas { background: black; } </style> </head> <body> <canvas id="canvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; var mX = 0; var mY = 0; var drops = []; for(var i=0;i<300;i++){ drops.push({ x: Math.random()*W, y: Math.random()*H, r: Math.random()*4+1, d: Math.random()*drops.length }) } function draw(){ ctx.clearRect(0, 0, W, H); for(var i=0;i<drops.length;i++){ var drop = drops[i]; ctx.beginPath(); ctx.arc(drop.x, drop.y, drop.r, 0, Math.PI*2); ctx.fillStyle = "rgba(0, 0, 255, 0.5)"; ctx.fill(); ctx.closePath(); drop.y += drop.d; if(drop.y > H){ drop.y = -1*drop.r; } drop.x += mX; drop.x += mY; } } setInterval(draw, 30); </script> </body> </html>

Conclusion

In this tutorial, you have learned how to create a realistic raindrop effect with JavaScript Canvas.

raja
Updated on 10-Oct-2022 12:00:48

Advertisements