web worker doesn't work

Question

May someone could tell me why my web worker does not work? I draw an animated canvas that is run well. But when I resize it via text boxes, it stops running until the JavaScript executed. Now, I create a worker to assume the task of resize the graphic without stopping the movement of canvas. I want it to update the value of the hidden field, by taking the values the text boxes, convert to string, then set the result to the hidden field value. For that I make to files. I mean no JavaScript code in the html markup. the code files are the follow

/* Code that will be run by the worker */

function applyChanges(radius, size) {
    return radius + "," + size;
}

/*
    Add an event listener to the worker, this will be called when      
    the worker receives a message from the main page.
*/
this.onmessage = function (event) {
    var data = event.data;

    // Message sent by the worker to the main page.
    postMessage(applyChanges(data.radius, data.size));
}

/* Worker's code */

// Create a new worker
var myWorker = new Worker("C:\applications\bb\scripts\setValues.js");
/*
    Add a event listener to the worker, this will be called whenever the worker posts any message.
*/
myWorker.onmessage = function (event) {
    document.getElementById().value = event.data;
};

// Register events for button.
document.getElementById("button").onclick = function () {
    var circle = document.getElementById("tcircle");
    var square = document.getElementById("tsquare");
    var radius = circle.value;
    var size = square.value;

    // check if those are numerics
    if (!isNaN(radius) && !isNaN(size)) {
        // verify that the won't hide more the 1/4 of the circle.
        if (radius >= size / Math.SQRT2) {
            // since we are going to test scrolling and zooming, we are not going to  set max values of radius and size.

            message = { "tcircle": radius, "tsize": size };

            // Message sent by the main page to the worker.
            myWorker.postMessage(message);

        }
        else {
            alert("The radius must not be less that: size/sqrt(2)");
        }
    }
    else {
        alert("Required numeric type!");
    }
}

// Terminate the worker.
myWorker.terminate(); 

Answer 1

Web Workers are asynchronous JavaScript processing environments that do not have access to their host environment: the DOM. In web workers you can offload intense algorithms, Math computations, but you cannot access form elements, change or access the DOM, and I also believe you cannot spawn ajax requests.

Answer 2

There has been an update to what Chrome allows now that may help with this problem.

Based on this answer, using Chrome you can pass the data back to the worker, then write it back to the canvas, so others may follow, but at least it is a way to continue with your testing.

Web Workers and Canvas

You may want to look at how this demo works to get an idea what you can do with WebWorker and Canvas .

http://www.robodesign.ro/coding/html5-demo-video-histogram/index-web-worker.html