Widget:Fog

<script>

    // fork of 
    // http://jsfiddle.net/jonnyc/Ujz4P/5/
    //
    // Create an array to store our particles
    var particles = [];
    // The amount of particles to render
    var particleCount = 60;
    // The maximum velocity in each direction
    var maxVelocity = 2;
    // The target frames per second (how often do we want to update / redraw the scene)
    var targetFPS = 33;
    // Set the dimensions of the canvas as variables so they can be used.
    var canvasWidth = window.innerWidth;
    var canvasHeight = window.innerHeight;
    // borders for particles on top and bottom
    var borderTop = 0.01 * canvasHeight;
    var borderBottom = 0.99 * canvasHeight;
    // Create an image object (only need one instance)
    var imageObj = new Image();
    // Once the image has been downloaded then set the image on all of the particles
    imageObj.onload = function() {
      particles.forEach(function(particle) {
        particle.setImage(imageObj);
      });
    };
    // Once the callback is arranged then set the source of the image
    imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";
    // A function to create a particle object.
    function Particle(context) {
      // Set the initial x and y positions
      this.x = 0;
      this.y = 0;
      // Set the initial velocity
      this.xVelocity = 0;
      this.yVelocity = 0;
      // Set the radius
      this.radius = 5;
      // Store the context which will be used to draw the particle
      this.context = context;
      // The function to draw the particle on the canvas.
      this.draw = function() {
        // If an image is set draw it
        if (this.image) {
          this.context.drawImage(this.image, this.x - 128, this.y - 128);
          // If the image is being rendered do not draw the circle so break out of the draw function                
          return;
        }
        // Draw the circle as before, with the addition of using the position and the radius from this object.
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        this.context.fillStyle = "rgba(0, 255, 255, 0.1)";
        this.context.fill();
        this.context.closePath();
      };
      // Update the particle.
      this.update = function() {
        // Update the position of the particle with the addition of the velocity.
        this.x += this.xVelocity;
        this.y += this.yVelocity;
        // Check if has crossed the right edge
        if (this.x >= canvasWidth) {
          this.xVelocity = -this.xVelocity;
          this.x = canvasWidth;
        }
        // Check if has crossed the left edge
        else if (this.x <= 0) {
          this.xVelocity = -this.xVelocity;
          this.x = 0;
        }
        // Check if has crossed the bottom edge
        if (this.y >= borderBottom) {
          this.yVelocity = -this.yVelocity;
          this.y = borderBottom;
        }
        // Check if has crossed the top edge
        else if (this.y <= borderTop) {
          this.yVelocity = -this.yVelocity;
          this.y = borderTop;
        }
      };
      // A function to set the position of the particle.
      this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
      };
      // Function to set the velocity.
      this.setVelocity = function(x, y) {
        this.xVelocity = x;
        this.yVelocity = y;
      };
      this.setImage = function(image) {
        this.image = image;
      };
    }
    // A function to generate a random number between 2 values
    function generateRandom(min, max) {
      return Math.random() * (max - min) + min;
    }
    // The canvas context if it is defined.
    var context;
    // Initialise the scene and set the context if possible
    function init() {
      var canvas = document.getElementById('myCanvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      if (canvas.getContext) {
        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');
        // Create the particles and set their initial positions and velocities
        for (var i = 0; i < particleCount; ++i) {
          var particle = new Particle(context);
          // Set the position to be inside the canvas bounds
          particle.setPosition(generateRandom(0, canvasWidth), generateRandom(borderTop, borderBottom));
          // Set the initial velocity to be either random and either negative or positive
          particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
          particles.push(particle);
        }
      } else {
        alert("Please use a modern browser");
      }
    }
    // The function to draw the scene
    function draw() {
      //  background image
      context.globalAlpha = 1;
            context.globalCompositeOperation = 'source-over';
      context.drawImage(backImg, 0, 0, canvasWidth, canvasHeight);

context.globalAlpha = 0.75; context.globalCompositeOperation = 'soft-lights';

      // Fog layer
      // Go through all of the particles and draw them.
      particles.forEach(function(particle) {
        particle.draw();
      });
      
    }
    // Update the scene
    function update() {
      particles.forEach(function(particle) {
        particle.update();
      });
    }
    // Initialize the scene
    init();
    var backImg = document.getElementById("back");
      // If the context is set then we can draw the scene (if not then the browser does not support canvas)
      if (context) {
        setInterval(function() {
          // Update the scene befoe drawing
          update();
          // Draw the scene
          draw();
        }, 1000 / targetFPS);
      }

</script>

<img id="back" width="100%" height="auto" src="https://lauracampbell89.files.wordpress.com/2014/12/e0bf35_1da77d8cc72b4028a5c0a40e8944884b.jpg" />

   <canvas id="myCanvas" width="900" height="600"></canvas>

I loved you
 at your darkest.