Rainfall effect using Canvas

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. We must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

In this tutorial, we are using canvas to create rainfall effect in a webpage.

Full Source Code :

<style>
  body{
    margin:0;
    background: #000;
  }
  canvas {
    background:url('https://i.ytimg.com/vi/Mha-HWAxYyM/maxresdefault.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;  
    width:100%;
    height:100vh;
  }
</style>

<canvas id='canvas' width='1280' height='720'></canvas>


<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');


  var stgw = 1280;
  var stgh = 720;

  var count = 100;
  var lcount = 5;

  var layer = [];
  var layery = [];

  ctx.fillStyle = "rgba(255,255,255,0.5)";
  for (var l=0;l<lcount;l++) {
    ctx.clearRect(0,0,stgw,stgh);
    for (var i=0;i<count*(lcount-l)/1.5;i++) {
      var myx = Math.floor(Math.random()*stgw);
      var myy = Math.floor(Math.random()*stgh);
      var myh = l*6+8;
      var myw = myh/10;
      ctx.beginPath();
      ctx.moveTo(myx,myy);
      ctx.lineTo(myx+myw,myy+myh);
      ctx.arc(myx, myy+myh, myw, 0, 1 * Math.PI);
      ctx.lineTo(myx-myw,myy+myh);
      ctx.closePath();
      ctx.fill();
    }
    layer[l] = new Image();
    layer[l].src = canvas.toDataURL("image/png");
    layery[l] = 0;
  }

  function animate() {
    ctx.clearRect(0,0,stgw,stgh);

    for (var l=0;l<lcount;l++) {
      layery[l] += (l+1.5)*5;
      if (layery[l]>stgh) {

        layery[l] =layery[l]-stgh;
      }
      ctx.drawImage(layer[l],0,layery[l]);
      ctx.drawImage(layer[l],0,layery[l]-stgh);
    }
    window.requestAnimationFrame(animate);
  }
  animate();
</script>
</body></html>

Follow this video for complete guidance :