Support for offscreen canvas

About events. I used to run unity webgl using offscreen canvas. I handled events and it works as expected without caveats.
On worker side I changed method offscreen.addEventListener = proxyEventHandler; in the beginning of worker`s code.

function proxyEventHandler(name, handler, useCapture) {

	// Storing all handlers in map
	handlers[name] = handler;

	// Calling main thread with event name
	workerToMain('bind', [name, useCapture]);

}

// Function called from main thread, where event is a plain object
function onCanvasEvent(event) {
	event.preventDefault = noop;
	handlers[name](event);
}

In main thread I bind real canvas for worker and send cloned event to worker.

function workerToBrowser(msg) {

	switch (msg.data.type) {
		case 'bind':
			// Real canvas in DOM
			canvas.addEventListener(name, onCanvasEvent, useCapture);
			return;
	}
}
function onCanvasEvent(event) {

	// We need plain object to send to worker
	const mouseEventCloned = {};

	// where mouseEventFields = ['altKey', 'bubbles', 'clientX', ...most events field]
	for (let field of mouseEventFields) {
		mouseEventCloned[field] = event[field];
	}

	worker.postMessage({
		type: 'event',
		body: mouseEventCloned,
	});
}

I did a lot of other changes to simulate DOM, added some properties like offscreen.clientWidth = offscreen.width and other stuff.

5 Likes