Is it possible to share a easel.js shape instance through json?

Question

I am trying to sync the state of a html canvas across multiple clients. I am using the easel.js framework, and it defines the shape objects. When a client adds a shape to their own stage, I want to send that shape to the server and relay it to other clients, like so:

let shape = new createjs.Shape();
shape.graphics.f("blue").drawRect(x, y, 50, 50);
conn.send(JSON.stringify(flatten(shape)));

and parse it on the other clients like so:

let shape = JSON.parse(evt.data);
stage.addChild(shape);
stage.update();

However, due to the stage.addChild(shape) method accessing some of the shapes inherited methods (I think), it fails, as json.stringify does not stringify inherited methods. Thats fine. By flattening the object we can make json stringify all the attributes. But the attribute it tries to access is a method defined on the object, which (as I understand it) JSON.stringify will not allow into the json.

The error message is:

Uncaught TypeError: child.dispatchEvent is not a function
at Stage.p.addChild (easeljs.js:7360)
at WebSocket.conn.onmessage (myscript.js:41)

Maybe there is an alternative way to sync the state of the stage across my clients? Or can I do something that will fix this problem?

Answer 1

Easel doesn't provide good support for serialisation of objects. FabricJS has better support for this and syncing the state of a canvas across clients.

See 'Serialisation' on fabricjs tutorial.