Skip to content
Related Articles

Related Articles

Improve Article

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. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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
Recommended Articles
Page :