JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=5 height=5></canvas>

JavaScript

function getWindowProperty(name) {
    var prefixes = ["", "WebKit", "webkit", "Moz", "moz"];
    for (var i = 0; i < prefixes.length; i++) {
        var fullName = prefixes[i] + name;
        var ob = window[fullName];
        if (ob) {
            console.log("using window." + fullName + " for " + name);
            return ob;
        }
        console.log("window." + fullName + " does not exist");
    }
    return null;
}

function createWorker(js) {
    function createBlobBuilder() {
        // Prefixed in Webkit, Chrome 12, and FF6: window.WebKitBlobBuilder, window.MozBlobBuilder
        var _BlobBuilder = getWindowProperty("BlobBuilder");
        if (_BlobBuilder) {
            return new _BlobBuilder();
        }
        return null;
    }

    var URL = getWindowProperty("URL");
    if (!URL) {
        return null;
    }

    // see http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers
    var bb = createBlobBuilder();
    if (null == bb) {
        return null;
    }
    bb.append(js);

    // Obtain a blob URL reference to our worker 'file'.
    // Note: window.webkitURL.createObjectURL() in Chrome 10+.
    var blobURL = URL.createObjectURL(bb.getBlob());

    var worker = new Worker(blobURL);
    return worker;
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var myImageData = context.getImageData(0, 0, canvas.width, canvas.height).data;

var worker = createWorker("onmessage = function(e) { postMessage('send back'); postMessage(e.data); }");

worker.onmessage = function(event) {
    var value = event.data;
    console.log("data=" + value + ".");
}

worker.postMessage('to worker');
worker.postMessage(myImageData[0]);
worker.postMessage(myImageData);