Edit in JSFiddle

<div class="holder" data-title="Comparing Data">
    <div id="content">
        <canvas id="originalCanvas" width=320 height=240></canvas>
        <canvas id="trackerCanvas" width=320 height=240></canvas>
        <br />
        <canvas id="eyeCanvas" width=80 height=60></canvas>
        <canvas id="bwCanvas" width=80 height=60></canvas>
        <canvas id="thCanvas" width=80 height=60></canvas>
        <br />
        <canvas id="oldCanvas" width=80 height=60></canvas>
        <canvas id="curCanvas" width=80 height=60></canvas>
    </div>
</div>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 20px;
    color: #000;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
}

.holder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
}

.holder:before {
    content: attr(data-title);
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    visibility: visible;
}

.holder:after {
    content: 'click to activate';
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    visibility: visible;
}

#content {
    text-align: center;
    visibility: hidden;
}

body.active .holder:before,
body.active .holder:after {
    visibility: hidden;
}

body.active #content {
    visibility: visible;
}
// properties
var content, webcam, tracker, raf, eyeRect, interval, oldData, curData;

// canvas and contexts
var originalCanvas, originalContext, trackerCanvas, trackerContext, eyeCanvas, eyeContext, bwCanvas, bwContext, thCanvas, thContext, oldCanvas, oldContext, curCanvas, curContext;

var settings = {
    contrast: 3,
    brightness: 0.5,
    threshold: 80,
};

function init() {
    content = document.getElementById('content');

    // adds listeners to activate and deactivate on iframe focus
    window.addEventListener('focus', start, false);
    window.addEventListener('blur', stop, false);

    // instanciate our Webcam class
    webcam = new Webcam();

    // tracker
    tracker = new clm.tracker();
    tracker.init(window.pModel);

    // eye rect
    eyeRect = {
        x: 0,
        y: 0,
        w: 0,
        h: 0,
    };

    // original canvas and context
    originalCanvas = document.getElementById('originalCanvas');
    originalContext = originalCanvas.getContext('2d');

    // tracker canvas and context
    trackerCanvas = document.getElementById('trackerCanvas');
    trackerContext = trackerCanvas.getContext('2d');

    // eye canvas and context
    eyeCanvas = document.getElementById('eyeCanvas');
    eyeContext = eyeCanvas.getContext('2d');

    // black & white canvas and context
    bwCanvas = document.getElementById('bwCanvas');
    bwContext = bwCanvas.getContext('2d');

    // threshold canvas and context
    thCanvas = document.getElementById('thCanvas');
    thContext = thCanvas.getContext('2d');

    // old canvas and context
    oldCanvas = document.getElementById('oldCanvas');
    oldContext = oldCanvas.getContext('2d');

    // cur canvas and context
    curCanvas = document.getElementById('curCanvas');
    curContext = curCanvas.getContext('2d');
}

function start(e) {
    e.preventDefault();
    document.body.className = 'active';

    webcam.start()
    tracker.start(webcam.domElement);

    raf = requestAnimationFrame(update);
    interval = setInterval(correlation, 100);
}

function stop(e) {
    e.preventDefault();
    document.body.className = '';

    webcam.stop();
    tracker.stop();

    cancelAnimationFrame(raf);
    clearInterval(interval);
}

function update() {
    raf = requestAnimationFrame(update);
    originalContext.clearRect(0, 0, originalContext.canvas.width, originalContext.canvas.height);
    trackerContext.clearRect(0, 0, trackerContext.canvas.width, trackerContext.canvas.height);
    bwContext.clearRect(0, 0, bwContext.canvas.width, bwContext.canvas.height);
    thContext.clearRect(0, 0, thContext.canvas.width, thContext.canvas.height);
    oldContext.clearRect(0, 0, oldContext.canvas.width, oldContext.canvas.height);
    curContext.clearRect(0, 0, curContext.canvas.width, curContext.canvas.height);

    // draw video element to canvas
    originalContext.drawImage(webcam.domElement, 0, 0, originalContext.canvas.width, originalContext.canvas.height);

    // draw tracker to canvas
    trackerContext.drawImage(webcam.domElement, 0, 0, trackerContext.canvas.width, trackerContext.canvas.height);
    tracker.draw(trackerCanvas);

    // extract right eye data
    var pos = tracker.getCurrentPosition();
    if (pos) {
        eyeRect.x = pos[23][0];
        eyeRect.y = pos[24][1];
        eyeRect.w = pos[25][0] - pos[23][0];
        eyeRect.h = pos[26][1] - pos[24][1];

        // draw eye
        eyeContext.drawImage(originalCanvas, eyeRect.x, eyeRect.y, eyeRect.w, eyeRect.h, 0, 0, eyeContext.canvas.width, eyeContext.canvas.height);

        // black and white
        var data = CanvasFilters.getPixels(eyeCanvas);
        var grayscale = CanvasFilters.grayscale(data, settings.contrast, settings.brightness);

        bwContext.putImageData(grayscale, 0, 0);

        // threshold
        var data = CanvasFilters.getPixels(eyeCanvas);
        var grayscale = CanvasFilters.grayscale(data, settings.contrast, settings.brightness);
        var threshold = CanvasFilters.threshold(grayscale, settings.threshold);

        thContext.putImageData(threshold, 0, 0);

        // draw old data set
        if (oldData) {
            oldContext.putImageData(oldData, 0, 0);
        }

        // draw cur data set
        if (curData) {
            curContext.putImageData(curData, 0, 0);
        }
    }
}

function correlation() {
    if (curData) {
        oldData = curData;
    }

    curData = thContext.getImageData(0, 0, thContext.canvas.width, thContext.canvas.height);
}

init();