Colors are different in literally-drawing a real time collaborative board

Question

I'm using Literally-Drawing which is real time collaborative drawing board.

Here is the Github and Demo link:

Github Literally-Drawing

Demo Link

This Repository is using two different libraries, one is Fabricjs and the second one is togetherjs, Initially there is only one default "PencilBrush" tool I wanted to add more tools into this but before that I was testing if I can dynamically change the color to "#ccc" or anything and brush type to "CircleBrush" They have connected together both the above mentioned libraries in the "Fabric-Whiteboard.js" file. There are two major functions WB.Core and WB.Collabrative. Core is creating the canvas and collabtive is pushing the data to Togetherjs server so that other browsers who are in the session can listen.

I have made some changes into Core.prototype._createCanvas function within WB.Core function originally it was only creating the canvas so I changed it to add "CircleBrush"

Originally

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

Changed to

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

Now this part is working fine i guess because it is giving any error also i have made some change in the "drawStart" within WB.Collaborate function.

Originally

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);
});

Problem: The problem is I want the same drawing to be broadcasted to other sessions and if I add following two lines it gives me an error of "Cannot set property 'color' of undefined" where as I can override the default value within WB.core successfully.

Tried to Change it to:

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:

Here is the JsFiddle I tried to make but for some reason real time collabration is not working on both my version and original one

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

This is what it looks like, I have set the color to grey and tool type to "CircleBrush". When I draw in parent Window to the left, it is drawing in grey color where as the child window is drawing in the black which is the default color defined in the fabric library, and vice versa.

Thanks