title: Custom drawing tool with custom properties in Fabric Js
body: <p>i am trying to create a custom drawing tool in the context of Fabric Js.
  By custom i mean to apply to every drawn free line custom properties <strong>e.g.:</strong> <br>
  1) - id of the created object; <br>
  2) - who created it; <br>
  3) - when is created <br>
  4) - when is updated <br>
  5)- etc.<br>
  <hr>
  For some other elements in the canvas that was more easy, e.g. for Circle, Rectangle, Triangle <br>
  <strong>Example (typescript, Angular code):</strong> <br></p>
  
  <hr>
  
  <pre><code>export class Circle extends fabric.Circle implements ExtendedFabricOptions {
  id: string;
  createdBy: string;
  editedBy: string;
  createdOn: string;
  updatedOn: string;
  
  constructor(props: ICircleOptions) {
      super(props);
      this.id = props.id;
      this.createdBy = props.createdBy;
      this.editedBy = props.editedBy;
      this.createdOn = props.createdOn;
      this.updatedOn = props.updatedOn;
  }
  }
  </code></pre>
  
  <p><hr>
  <strong>And implementation of the code:</strong> <br></p>
  
  <pre><code>onMouseDown(e: fabric.IEvent) {
  const mousedownPointer: fabric.ICoords2d = {
    x: e.pointer.x,
    y: e.pointer.y
  };
  
  const object: Circle = new Circle({
    radius: 1,
    fill: this.fillColor,
    stroke: this.strokeColor,
    strokeWidth: this.strokeThickness,
    left: e.pointer.x,
    top: e.pointer.y,
    includeDefaultValues: false,
    id: this.whiteboardService.generateUUID(),
    createdBy: this.attendeeId,
    createdOn: (new Date()).getTime()
  });
  </code></pre>
  
  <p><br></p>
  
  <pre><code>onMouseMove(e: fabric.IEvent, mousedownPointer: fabric.ICoords2d, object: Circle) {
      ... update Circle object here
  }
  </code></pre>
  
  <p><br></p>
  
  <pre><code>onMouseUp(e: fabric.IEvent, object: Circle) {
      ... final logic here
  }
  </code></pre>
  
  <p><hr>
  But for Brush and Pencil is more complicated, since after setting the <strong>"isDrawingMode"</strong> property of the canvas (this.canvas.isDrawingMode = true;) to "true"
  we have already creating an object, which behind the scene Fabric is attaching mousedown, mousemove, and mouseup event handlers.
  On mouseup <strong>"'mouseup' event, Fabric fires 'path:created' event and actually transforms just-drawn shape into a real fabric.Path instance!"</strong>
  <br>
  So, based on this information - which would be the best approach to draw customized brushes with custom properties (id, creatdOn, UpdatedBy... etc...).
  From which object is good my custom object to extend:
  <strong>For example:</strong></p>
  
  <pre><code>export class Highlighter extends fabric.BaseBrush implements ExtendedFabricOptions {
    uuid: string;
    createdBy: string;
  
    constructor() {
      ...
    }
  }
  </code></pre>
  
  <p><strong>OR:</strong></p>
  
  <pre><code>export class Highlighter extends fabric.Path implements ExtendedFabricOptions
  </code></pre>
  
  <p>And based on extending the object, what will be the best way to create it:
  If path there might be events for mousedown, mousemove and mouseup handling and updating the newly created instance of that Class.</p>
  
  <p>Thank you in advance. That is very important topic since there are a lot of people trying to that the same behavior in the the most proper way!
  <hr>
  Based on the answer for overriding mouse events of the <strong>freeDrawingBrush</strong> and including this.createdBy = 'some user id' and including other custom properties.
  In fact these properties are applied to the class but not to the created instance. The goal is every created <strong>brush object</strong>, on selection to hold it's  own properties (it's own id, creator id, etc...)
  With provided answer <strong>"this"</strong> in the mouse handler is:
  <br>
  <a href="https://i.stack.imgur.com/NZYCI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NZYCI.png" alt="enter image description here"></a></p>
  
  <p><strong>But on selection the same element doesn't have these properties:</strong> <br>
  <a href="https://i.stack.imgur.com/3x0bi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3x0bi.png" alt="enter image description here"></a></p>