Cannot use Easeljs inside webworker

[nicolasgoudard]

TODO

Hi
I am using the last version of CreateJS (EaselJS 1.0.0 )
We cannot use easeljs functionalites in Webworker
because it is impossible to include by the "importScripts " keyword : I think because the library use the javascript "window" or "document" objects that refer to the DOM
this is a serious problem if you want to do complex geometric figure position calculations in the background before refreshing the canvas without the user losing control
Best Regards

[danzen]

Hi @nicolasgoudard - will this help? https://github.com/CreateJS/EaselJS-NodeJS - oh, maybe not as it is built on-top of node-canvas. Hmmm. Perhaps someone else has a better answer.

We had someone who succeeded running without a DOM here - perhaps you can find some clues... danzen/zimjs#39 this was on the ZIM GitHub which runs on CreateJS.

[danzen]

@nicolasgoudard - did you find a work-around for this at all?

[jackpunt]

FWIW, I did a patch to createjs.js (from a different branch/repo) to fix this problem.
(and have used it to run worker threads in Chrome browser)

Basically:
at the top of file insert this to define ww:

+ var ww; try { ww = window} catch { ww = false }

Then throughout (6 or 7 places), check for ww before accessing 'window' or 'document':

! 	var w=window, now=w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow;

becomes

! 	 var w=ww&&window, now=ww&&(w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow);

and

! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));

becomes

! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));

That being said, I have just discovered this repo; it appears that Dan has inherited it from lenny/gskinner?
So I've just started to see what all it does... Does it produce a ESM module?
(I adapted the albary3 the hacks to make an npm installable ESM)

Dan,
Let me know if you want contributions/PRs for this repo;
I got a bit lost with the transition to Slack a while back, but expect to be more present now.
AKA (Jeff Peck)

[jpeckj]

FWIW, I did a patch (from a different branch/repo) to fix this problem.
(and have used it to run worker threads in Chrome browser)
Here is the context diff/patch against the composite createjs.js

That being said, I have just discovered this repo; it appears that Dan has inherited it from lenny/gskinner?
So I've just started to see what all it does... Does it produce a ES6 module?
(I did the hacks to make ES6 work on my repo)

*** 1413,1419 ****
  	 * @static
  	 * @private
  	 **/
! 	var w=window, now=w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow;
  	Ticker._getTime = function() {
  		return ((now&&now.call(w.performance))||(new Date().getTime())) - Ticker._startTime;
  	};
--- 1415,1421 ----
  	 * @static
  	 * @private
  	 **/
! 	 var w=ww&&window, now=ww&&(w.performance.now || w.performance.mozNow || w.performance.msNow || w.performance.oNow || w.performance.webkitNow);
  	Ticker._getTime = function() {
  		return ((now&&now.call(w.performance))||(new Date().getTime())) - Ticker._startTime;
  	};
***************
*** 3922,3928 ****
  	 * @protected
  	 * @type {CanvasRenderingContext2D}
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) {
  		Graphics._ctx = canvas.getContext("2d");
  		canvas.width = canvas.height = 1;
--- 3924,3930 ----
  	 * @protected
  	 * @type {CanvasRenderingContext2D}
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) {
  		Graphics._ctx = canvas.getContext("2d");
  		canvas.width = canvas.height = 1;
***************
*** 6346,6352 ****
  	 * @static
  	 * @protected
  	 **/
! 	var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"); // prevent errors on load in browsers without canvas.
  	if (canvas.getContext) {
  		DisplayObject._hitTestCanvas = canvas;
  		DisplayObject._hitTestContext = canvas.getContext("2d");
--- 6348,6354 ----
  	 * @static
  	 * @protected
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas")); // prevent errors on load in browsers without canvas.
  	if (canvas.getContext) {
  		DisplayObject._hitTestCanvas = canvas;
  		DisplayObject._hitTestContext = canvas.getContext("2d");
***************
*** 7937,7943 ****
  		 * @property canvas
  		 * @type HTMLCanvasElement | Object
  		 **/
! 		this.canvas = (typeof canvas == "string") ? document.getElementById(canvas) : canvas;
  	
  		/**
  		 * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
--- 7939,7945 ----
  		 * @property canvas
  		 * @type HTMLCanvasElement | Object
  		 **/
! 		this.canvas = (typeof canvas == "string") ? ww&&document.getElementById(canvas) : canvas;
  	
  		/**
  		 * The current mouse X position on the canvas. If the mouse leaves the canvas, this will indicate the most recent
***************
*** 8608,8613 ****
--- 8610,8616 ----
  			nextStage&&nextStage._testMouseOver(clear, owner, eventTarget);
  			return;
  		}
+ 		if (this.stage.canvas) {
  		var o = this._getPointerData(-1);
  		// only update if the mouse position has changed. This provides a lot of optimization, but has some trade-offs.
  		if (!o || (!clear && this.mouseX == this._mouseOverX && this.mouseY == this._mouseOverY && this.mouseInBounds)) { return; }
***************
*** 8657,8662 ****
--- 8660,8666 ----
  		if (oldTarget != target) {
  			this._dispatchMouseEvent(target, "mouseover", true, -1, o, e, oldTarget);
  		}
+ 		}
  		
  		nextStage&&nextStage._testMouseOver(clear, owner || target && this, eventTarget || isEventTarget && this);
  	};
***************
*** 11999,12005 ****
  	 * @type CanvasRenderingContext2D
  	 * @private
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }
  	
  	
--- 12001,12007 ----
  	 * @type CanvasRenderingContext2D
  	 * @private
  	 **/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) { Text._workingContext = canvas.getContext("2d"); canvas.width = canvas.height = 1; }
  	
  	
***************
*** 13361,13367 ****
  	 * @type CanvasRenderingContext2D
  	 * @protected
  	*/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():document.createElement("canvas"));
  	if (canvas.getContext) {
  		SpriteSheetUtils._workingCanvas = canvas;
  		SpriteSheetUtils._workingContext = canvas.getContext("2d");
--- 13363,13369 ----
  	 * @type CanvasRenderingContext2D
  	 * @protected
  	*/
! 	var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  	if (canvas.getContext) {
  		SpriteSheetUtils._workingCanvas = canvas;
  		SpriteSheetUtils._workingContext = canvas.getContext("2d");
***************
*** 13848,13854 ****
  			if (o.w > x) { x = o.w; }
  			y += o.h;
  			if (!o.h || !frames.length) {
! 				var canvas = createjs.createCanvas?createjs.createCanvas():document.createElement("canvas");
  				canvas.width = this._getSize(x,this.maxWidth);
  				canvas.height = this._getSize(y,this.maxHeight);
  				this._data.images[img] = canvas;
--- 13850,13856 ----
  			if (o.w > x) { x = o.w; }
  			y += o.h;
  			if (!o.h || !frames.length) {
! 				var canvas = (createjs.createCanvas?createjs.createCanvas():ww&&document.createElement("canvas"));
  				canvas.width = this._getSize(x,this.maxWidth);
  				canvas.height = this._getSize(y,this.maxHeight);
  				this._data.images[img] = canvas;
***************

[jackpunt]

I have cloned this repo, and will "soonish" have a PR for this.
I'm making a few other PRs and also building the ESM version, so expect it in a day or two.
[A: windowless Stage, B: on(,,, once=true) fix]

Dan: it would be helpful to publish a new "release" when CreateJS package is updated.
That is: the code version is 1.0.3, but the lib/ files are not updated, and no "released version" since 1.0.0
Hmm, I'll try to DM you on Slack.