字面上绘制实时协作板的颜色不同

Question

我使用Literally-Drawing这是一个实时协作绘图板。

这是Github和Demo链接：

Github Literally-Drawing

Demo Link

这个存储库使用两个不同的库，一个是Fabricjs，第二个是togetherjs，最初只有一个默认＆＃34; PencilBrush＆＃34;工具我想在此添加更多工具但在此之前我正在测试是否可以动态地将颜色更改为＆＃34;＃ccc＆＃34;或任何东西和刷子类型到＆＃34; CircleBrush＆＃34;他们将上面提到的两个库连接在一起 - ＆＃34; Fabric-Whiteboard.js＆＃34;文件。 WB.Core和WB.Collabrative有两个主要功能。 Core正在创建画布，协作正在将数据推送到Togetherjs服务器，以便会话中的其他浏览器可以收听。

我在WB.Core函数中对Core.prototype._createCanvas函数进行了一些更改，原来它只创建了画布，所以我将其更改为添加＆＃34; CircleBrush＆＃34;

最初

Core.prototype._createCanvas = function(id) 
{
  return new fabric.Canvas(id);
};

已更改为

Core.prototype._createCanvas = function(id) 
{
  var canvasCreate = new fabric.Canvas(id);
      canvasCreate.freeDrawingBrush = new fabric['CircleBrush'](canvasCreate);
      canvasCreate.freeDrawingBrush.color = "#CCCCCC";
  return canvasCreate;
};

现在这部分工作正常，我猜是因为它给出了任何错误，我也在＆＃34; drawStart＆＃34;在WB.Collaborate功能。

最初

this.TJS.hub.on('drawStart', function(data) 
{
  var _base, _name;

  if ((_base = _this.client)[_name = data.clientId] == null) 
  {
      _base[_name] = new fabric['PencilBrush'](canvas); // origianlly
  }

  return _this.client[data.clientId].onMouseDown(data.point);
});

问题： 问题是我希望将相同的绘图广播到其他会话中，如果我添加以下两行，它会给我一个错误＃34;无法设置属性＆＃39; color＆＃39;未定义＆＃34;我可以在哪里成功覆盖WB.core中的默认值。

试图将其更改为：

this.TJS.hub.on('drawStart', function(data) 
{
  var _base, _name;

  if ((_base = _this.client)[_name = data.clientId] == null) 
  {
        var testCanvas = new fabric['CircleBrush'](canvas); // origianlly
        testCanvas.freeDrawingBrush.color = "#ccc";

        _base[_name] = testCanvas;
  }

  return _this.client[data.clientId].onMouseDown(data.point);
});

的jsfiddle：

这是我试图制作的JsFiddle，但出于某种原因，实时协作对我的版本和原版都不起作用

MyJsFiddle： https://jsfiddle.net/mwgi2005/p7cwu9ao/7/

这就是它的样子，我将颜色设置为灰色，工具类型设置为＆＃34; CircleBrush＆＃34;。当我在左侧绘制父窗口时，它以灰色绘制，其中子窗口以黑色绘制，这是在结构库中定义的默认颜色，反之亦然。

由于