How to create Realistic Raindrops Effect With Javascript Canvas ?

Last Updated : 05 Aug, 2021

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 = 
'https://media.geeksforgeeks.org/wp-content/uploads/20210802132841/geeks.jpg'; 
        } 
    </script> 
  
    <!-- Linking rainyday.js library file -->
    <script src="src/rainyday.js"></script> 
</body> 
  
</html> 