<script>

//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var canvasWidth=context.width; var canvasHeight= context.height; var fogCount=15; var fog=new Image(); var mountain=new Image(); var fogs=[]; var FPS=20; var maxVel=1;

fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; mountain.src="https://s27.postimg.org/4j5c7127n/mac2.jpg" ;

function fogPart(){ this.x=0; this.y=0; this.xVel=0; this.yVel=0; this.radius=5; this.draw=function(){ context.drawImage(this.image,this.x-100,this.y-100);

}; this.update=function(){

this.x += this.xVel;

       this.y += this.yVel;

       if (this.x >= canvasWidth) {
           this.xVel = -this.xVel;
           this.x = canvasWidth;
       }
  
       else if (this.x <= 0) {
           this.xVel = -this.xVel;
           this.x = 0;
       }

       if (this.y >= canvasHeight) {
           this.yVel = -this.yVel;
           this.y = canvasHeight;
       }
       
     
       else if (this.y <= 0) {
           this.yVel = -this.yVel;
           this.y = 0;
       }

};

this.setImage=function(img){ this.image=img; }; this.setPos = function(x, y) {

       this.x = x;
       this.y = y;
   };

   this.setVel = function(x, y) {
       this.xVel = x;
       this.yVel = y;
   };

};

function random(min, max){

   return Math.random() * (max - min) + min;

} function init() {

   if (canvas.getContext) {
       context = canvas.getContext('2d');
       for(var i=0; i < fogCount; i++){
           var fog = new fogPart();

           fog.setPos(random(0, canvasWidth), random(0, canvasHeight));
    
           fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel));
           fogs.push(fog);            
       }
   }
   else {
       alert("UN-supported browser");
   }

};

fog.onload=function(){

fogs.forEach(function(part){ part.setImage(fog); });

}; function draw(){

   context.drawImage(mountain,0,0);
   context.globalAlpha = 0.09;
   fogs.forEach(function(part) {
       part.draw();
   });

}; function update(){ fogs.forEach(function(part){ part.update(); });

};

init(); if (context) {

   setInterval(function() {
       update();draw();
   }, 1000 / FPS);

}

</script>

<canvas id="canvas" width="750" height="390"></canvas>