mist.js

var canvas = document.getElementById('canvas1');
var img = new Image;
var mst = new Image;
var mstSrc = "http://i.ytimg.com/vi/zNeaXKF0Eik/maxresdefault.jpg";
var imgSrc = "http://www.goodwp.com/images/201303/goodwp.com_27776.jpg";

const drawBackground = (canvas) => {
	const ctx = canvas.getContext('2d');
  ctx.globalCompositeOperation = "source-over";
  ctx.globalAlpha = 1;
	ctx.drawImage(
  	img,
		0, 0, img.width,    img.height,
		0, 0, canvas.width, canvas.height
	);
}

const mist = (canvas, bmp, speed) => {
  var dx = Math.round(Math.random() * canvas.width);
  
  const dy = Math.round(Math.random() * 80);
  const da = 0.45;
  const ctx = canvas.getContext('2d');
  
  return () => {
    const alpha = ctx.globalAlpha;
    const composite = ctx.globalCompositeOperation;
    ctx.globalAlpha = da;
    ctx.globalCompositeOperation = "screen"
    ctx.drawImage(bmp, dx, 0, canvas.width, canvas.height, 0, dy, canvas.width, canvas.height);
    dx += 1 * speed;
    if(dx > 0 && dx >= canvas.width*2) { dx = dx%canvas.width*2; }
    // if(dx < 0 && dx <= canvas.width*-2) { dx = dx%canvas.width*2; }

    ctx.globalAlpha = alpha;
    ctx.globalCompositeOperation = composite;

  }
}

img.onload = () => {
	drawBackground(canvas);
}

mst.onload = () => {
	const bmp = document.createElement('canvas');
  bmp.width = canvas.width*3;
  bmp.height = canvas.height;
  //document.getElementsByTagName('body')[0].appendChild(bmp);
  const ctx = bmp.getContext('2d');
	ctx.drawImage(
  	mst,
		0, 0, mst.width,    mst.height,
		0, 0, canvas.width, canvas.height
	);
	
	ctx.scale(-1, 1);
  ctx.drawImage(
  	mst,
		0, 0, mst.width,    mst.height,
		-canvas.width*1, 0, -canvas.width, canvas.height
	);
  
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.drawImage(
  	mst,
		0, 0, mst.width,    mst.height,
		canvas.width*2, 0, canvas.width, canvas.height
	);
	

  
	const loop = (canvas) => {
  	
    const m1 = mist(canvas, bmp, 0.015);
  	const m2 = mist(canvas, bmp, 0.165);
  	const m3 = mist(canvas, bmp, 0.125);
		
    var dt = null;
    
		const fn = (time) => {
    	if(!dt || time - dt > 1000/24) {
      	dt = time;
    		drawBackground(canvas);
	    	m1();
	    	m2();
	    	m3();
      }
      window.requestAnimationFrame(fn);
    }
    return fn;
	}
  
  loop(canvas)();

}


img.src = imgSrc;
mst.src = mstSrc;