Web workers and Canvas data

Question

I have seen a lot of threads about web workers and <canvas> data passing, and I'm not sure if my scenario is implementable.

I want to create a small site for users to learn to code in Javascript. When users click a button, the code is run in a web worker. To help them, I have also created methods for "printing" (which basically just adds text to a <pre> element.

// get code from user and prepend helper "functions"
var userCode = editor.getValue();
var codeWithMessages = "\n\
    function print(data) { postMessage(\"\"+data); } \n\
    function println(data) { postMessage(\"\"+data+\'\\n\'); } \n\
    function alert(data) { postMessage('ALERT'+data); }  \n\
    \n" + userCode;
var codeWithMessagesAndExit = codeWithMessages + "\npostMessage('exit()');";
var blob = new Blob([codeWithMessagesAndExit], {type: 'application/javascript'});
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
outer.worker = new Worker(blobURL);

...
// handle messages by "printing" to the run-output element, or display
// a success message when finishing
outer.worker.addEventListener('message', function (event) {

        if (event.data == "exit()") {
            outer.worker.terminate();
            outer.worker = null;

            outer.codeRunStatus = outer.CODE_RUN_SUCCESS;
            outer.errorMessage = null;
            outer.outputFromLatestRun = $("#run-output").text();
            $("#run-output").append("<span class='code-run-success'>\nKörning klar</span>");
            enableButtons();
        }
        else if (event.data.indexOf("ALERT") == 0) {
            alert(event.data.substring(5));
        }
        else {
            $("#run-output").append(event.data);
        }
    }, false);
// start the worker
outer.worker.postMessage();

Now I want to add a canvas to the page, so users could write code to draw on it.

var canvas = document.getElementById("user-canvas");
var ctx = canvas.getContext("2d");
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
// rest same as above
outer.worker.postMessage(imgData);

I don't know how to proceed from here. Ideally the users could write something like

myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect (10, 10, 55, 50);

and then have this processed by the event listener like I did with my print() functions. Is this possible?

Answer 1

DOM can't be accessed from a WebWorker.

The best way I can see is to re-define this object in the webworker, and define a protocol to transmit each call to a method. But it won't work when you need other objects like images.

Worker-side :

var CanvasRenderingContext2D = function() {
    this.fillStyle = "black";
    this.strokeStyle = "black";
    ...
    this.lineWidth = 1.0;
};

["fillRect", "strokeRect", "beginPath", ... "rotate", "stroke"].forEach(function(methodName) {
    CanvasRenderingContext2D.prototype[methodName] = function() {
        postMessage({called: methodName, args: arguments, currentObjectAttributes: this});
    };
});

...

var myCanvas = new CanvasRenderingContext2D();
myCanvas.fillStyle = "rgb(200,0,0)";
myCanvas.fillRect(10, 10, 55, 50);

Main-page side :

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var worker = new Worker( ... );
worker.onMessage = function(event) {
    var data = event.data;

    // Refreshing context attributes
    var attributes = data.currentObjectAttributes;
    for(var k in attributes) {
        context[k] = attributes[k];
    }

    // Calling method
    var method = context[data.called];
    method.apply(context, data.args);
};

EDIT :

I tried to integrate it with your code (not tested). To integrate it, I had to change the structure of the messages sent by the worker.

// get code from user and prepend helper "functions"
var userCode = editor.getValue();
var codeWithMessages = '\n\
function print  (data) { postMessage(["print", data.toString()]); } \n\
function println(data) { postMessage(["print", data.toString() + "\\n"]); } \n\
function alert  (data) { postMessage(["alert", data.toString()]); } \n\
var CanvasRenderingContext2D = function() { \n\
    this.fillStyle   = "black"; \n\
    this.strokeStyle = "black"; \n\
    /* ... */ \n\
    this.lineWidth = 1.0; \n\
}; \n\
["fillRect", "strokeRect", "beginPath", /* ... */ "rotate", "stroke"].forEach(function(methodName) { \n\
    CanvasRenderingContext2D.prototype[methodName] = function() { \n\
        postMessage(["canvas", {called: methodName, args: Array.prototype.slice.call(arguments), currentObjectAttributes: this}]); \n\
    }; \n\
});\n' + userCode;
var codeWithMessagesAndExit = codeWithMessages + "\npostMessage(['exit']);";
var blob = new Blob([codeWithMessagesAndExit], {type: 'application/javascript'});
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
outer.worker = new Worker(blobURL);

...

// Define your canvas ...
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");

// handle messages by "printing" to the run-output element, or display
// a success message when finishing
outer.worker.addEventListener('message', function (event) {
    var method = event.data[0] || null;
    var data   = event.data[1] || null;

    if(method == "canvas") {
        // Refreshing context attributes
        var attributes = data.currentObjectAttributes;
        for(var k in attributes) {
            context[k] = attributes[k];
        }

        // Calling method
        var method = context[data.called];
        method.apply(context, data.args);
    } else if(method == "exit") {
        outer.worker.terminate();
        outer.worker = null;

        outer.codeRunStatus = outer.CODE_RUN_SUCCESS;
        outer.errorMessage = null;
        outer.outputFromLatestRun = $("#run-output").text();
        $("#run-output").append("<span class='code-run-success'>\nKörning klar</span>");
        enableButtons();
    } else if(method == "alert") {
        alert(data);
    } else if(method == "print") {
        $("#run-output").append(data);
    } else {
        $("#run-output").append(event.data);
    }
}, false);
// start the worker
outer.worker.postMessage();