Ich entwickle ein kollaboratives Whiteboard unter Verwendung von Fabricjs. Wenn ein Benutzer ein neues Fabric-Objekt erstellt, serialisiere ich es und sende es an alle anderen Benutzer.

var rect = new fabric.Rect();
canvas.add(rect);  
socket.emit("newObject", JSON.stringify(rect)); // sends the object to other users

Wenn diese Benutzer das serialisierte Objekt erhalten, sollte es deserialisiert und zu ihrer Zeichenfläche hinzugefügt werden. Wie geht das am besten? Ich konnte keine Funktion finden, die ein einzelnes Objekt deserialisiert, sondern nur die gesamte Zeichenfläche (loadFromJSON). Daher habe ich eine unelegante Lösung implementiert:

function drawRoomObjects(roomObjects){
  var canvasString = "{\"objects\":[";
  for(var roomObjectKey in roomObjects){
    canvasString += roomObjects[roomObjectKey];
  }
  canvasString += "], \"background\":\"\"}";
  var tmpCanvas = new fabric.Canvas();
  tmpCanvas.loadFromJSON(canvasString);
  for(var k in tmpCanvas.getObjects()) {
    canvas.add(tmpCanvas._objects[k]);
  }
  canvas.renderAll();
}

Anregungen für einen besseren Weg, es zu tun?