Search code examples
javascriptfabricjs

Is perPixelTargetFind valid with objects created with freeDrawingBrush?

Does perPixelTargetFind work with objects created by freeDrawingBrush? Same for specifying cornerColor, etc. I am able to select the free-drawn objects but only by the bounding box and the controls are the default.

(It's been a while since I worked with Fabric.js so sorry if this is a too-basic question. Also, while I am here: are there any more "user friendly" forms of the Fabric.js documentation than the JSDocs which exist at http://fabricjs.com? Those docs are fine but it is difficult to get an overview of properties except by scrolling through entire pages)

I create my PencilBrush like this:

 this.object = new fabric.PencilBrush(this.canvas, {
  width: this.strokeWidth,
  color: this.stroke,
  perPixelTargetFind: true,
  cornerColor: "#ff0000",
  borderColor: "#00ff00",
  hasBorders: true,
  hasControls: true
});
this.canvas.freeDrawingBrush = this.object

enter image description here

Solution

  • Reading through the docs for canvas I discovered that I can set perPixelTargetFind for the canvas itself rather than for the individual shape instances as I had been doing, so now paths created with the freeDrawingBrush brush are selectable by their painted areas only rather than by their bounding boxes

       this.canvas = new fabric.Canvas(canvasEl, {
      perPixelTargetFind :true
    });