Skip to content
Related Articles

Related Articles

How to create Realistic Raindrops Effect With Javascript Canvas ?

Improve Article
Save Article
  • Last Updated : 05 Aug, 2021
Improve Article
Save Article

In this article, we will learn how can we create realistic raindrops effects using JavaScript canvas.

We use this raindrop effect in our websites to make them more beautiful so that the user interaction increases. Suppose there is a website in which we have a picture of the monsoon but if the picture is static and not showing raindrops, so we can apply this to it to make it realistic. 

To implement the above, we are using an open-source library called rainyday.js to include such a effect using canvas element. 

Approach: We use a pre-build library called rainyday.js. Go to the downloads folder and extract the zip file of rainyday.js and then navigate to the directory “src”. Copy rainyday.js file and paste it to your project folder. 

Folder structure

When the src folder is opened, we can see the rainyday.js library file used in the project.

Open the src folder to get the required library file

Example: Create an index.html file and link the rainyday.js file in the head section of the file to use the library.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Rain Effect</title>
  
    <style>
        /* Adding css to the body */
          
        body {
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        /* setting Image height*/
          
        img {
            height: 100%;
        }
    </style>
</head>
  
<body onload="render();">
    <img src="" alt="" id="back">
  
    <script>
  
        // Creating a function when our document loads 
        function render() {
  
            var image = document.getElementById('back');
            image.onload = function() {
  
                // Initiating a object of rainyday library
                var engine = new RainyDay({
                    image: this
                });
  
                // Now rendering them on the screen 
                // first element - size of drops,
                // second element - size of effect drops produced
                // third element - Quantity of drops
                engine.rain([
                    [10, 5, 10]
                ], 100);
            };
            image.src =
        }
    </script>
  
    <!-- Linking rainyday.js library file -->
    <script src="src/rainyday.js"></script>
</body>
  
</html>

Output:

rainyday effect


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!