your almost there !!!!!

by Nick Hulea

HTML

<div id="center">
    <div id="left">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3_slice.png" />
    </div>
    <div id="videoWrapper" style="display:none;">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_110.png" />
        <!--<iframe id="bj_vid" style="display:none;" src="//www.youtube.com/embed/aKi-cj39-xg" frameborder="0" allowfullscreen></iframe>-->
    </div>
    <div id="right">
        <img src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3_slice_54.png" />
    </div>
</div>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas2"></canvas>

CSS

html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                border: 0;
                overflow: hidden;
                /*  Disable scrollbars */
                display: block;
                /* No floating content on sides */
            }
            canvas {
                display:block;
                position: absolute;
                top: 0;
                left: 0;
            }
            #videoWrapper iframe, #videoWrapper img {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #videoWrapper {
                position: absolute;
                top: 0;
                bottom: 50px;
                left: 0;
                right: 0;
                margin: auto;
                width:50%;
                height:50%;
            }
            #myCanvas {
                z-index:1;
            }
            #myCanvas2 {
                z-index:-1;
            }
            #center {
                width:50%;
                height:100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #hands {
                width:50%;
                height:100%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            #left {
                z-index: 6;
                height: 50%;
                width: 50%;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: auto;
            }
            #right {
                z-index: 5;
                height: 50%;
                width: 50%;
               ...

JavaScript

var canvas = document.getElementById('myCanvas');
var canvas2 = document.getElementById('myCanvas2');
var center = document.getElementById("center");
var vid = document.getElementById("videoWrapper");
var video = document.getElementById("bj_vid");
var vWrapper = document.getElementById("videoWrapper");
var leftHand = document.getElementById("left");
var rightHand = document.getElementById("right");

var vidWidth,
vidHeight;

var W = window.innerWidth;
var H = window.innerHeight;

var m = Math.min(W, H);
var s = m * 0.0000025;

canvas.width = W;
canvas.height = H;
canvas2.width = W;
canvas2.height = H;

//RECT SIZE
var rw = 344;
var rh = 405;

//Images
var lh = new Image();
lh.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3.png";
var rh = new Image();
rh.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3.png";
var cloud1 = new Image();
cloud1.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_final_2.png";
var cloud2 = new Image();
cloud2.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/cloud_4.png";
var sky = new Image();
sky.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/sky.jpg";
var rVid = new Image();
rVid.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_right_110.png";
var lVid = new Image();
lVid.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/vid_image_left_110.png";
var lhslice = new Image();
lhslice.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/lefty_v3_slice.png";
var rhslice = new Image();
rhslice.src = "http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/righty_v3_slice_54.png";

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');

//Image Cloud Array 
var...