Fabric.js: Custom brushes in free drawing doesn't work.

[kusmierczykw]

Version

4.1.0

Test Case

https://codepen.io/kusmierczykw/pen/ExKZqKV

Steps to reproduce

When i written custom PatternBrush method: getPatternSrc based on http://fabricjs.com/freedrawing I noticed a bug. The browser console shows request to image. I debug the code and i notice that:

createPath: function(pathData) {
    var path = this.callSuper('createPath', pathData),
        topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2);

    path.stroke = new fabric.Pattern({
      source: this.source || this.getPatternSrcFunction(),
      offsetX: -topLeft.x,
      offsetY: -topLeft.y
    });
    return path;
  }

this.source is undefined and the this.getPatternSrcFunction() returning string. So in Pattern.class.js initialize() function
the code that is in else block is executed :

initialize: function(options, callback) {
      options || (options = { });

      this.id = fabric.Object.__uid++;
      this.setOptions(options);
      if (!options.source || (options.source && typeof options.source !== 'string')) {
        callback && callback(this);
        return;
      }
      else {
        // img src string
        var _this = this;
        this.source = fabric.util.createImage();
        fabric.util.loadImage(options.source, function(img, isError) {
          _this.source = img;
          callback && callback(_this, isError);
        }, null, this.crossOrigin);
      }
    },

Expected Behavior

Can create custom brushes in free drawing.

[mspanish]

I"ve used the exact code from the freedrawing example on the website, with the latest version downloaded via NPM into Svelte. The circle and spray brushes work fine, but the pattern brushes all fail with the same error. What's weird is that while I'm drawing & mouse is still moving, I can see the pattern perfectly. Then when I try to left up the mouse the pattern disappears.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[asturur]

Yes, this is a breaking change from 4.0
The reason of the change was compliance with some security level where possible. In particular in this case the pattern + patternBrush was a closed system, but the pattern itself in 3.x was doing this:

      // function string
      if (typeof fabric.util.getFunctionBody(options.source) !== 'undefined') {
        this.source = new Function(fabric.util.getFunctionBody(options.source));
        callback && callback(this);
      }

from code saved in JSON was restoring a function at real time, with all the concern regarding possibly hacking the function code.

Now the demo hasn't been updated and i see the pattern brush hasn't been updated too.
Let me see if i can fix the demo so that you get the example fix and i also have one less demo to convert to v4

[asturur]

Here you can see the updated code:
http://fabricjs.com/freedrawing
What i did was this:

if (brush.getPatternSrc) {
  brush.source = brush.getPatternSrc.call(brush);
}

This will get serialized a little big bigger because the canvas will result in a png image rather than a function, but this was the intent of stopping using functions in the JSON data.

[mspanish]

worked perfectly thank you very much. Hope to get your the rest of your SVGs soon sorry been working hard on something hard to take time off to dig in my older laptop :)

[kusmierczykw]

Good job :+1: I think, that we can close this issue.

[mspanish]

Sorry I have a couple of questions about the drawing brushes - first is the circle brush, is there any way to specify a random color for each circle rather than just 1? I realize that's a weird request but I think it would look really cool :+1:

Another is about the brush shadow width. For the color controls - it's easy to have a live update type feature where the user can select an object that was drawn w/ a brush - and update the color w/ an input. Same with the shadow color. But for the shadow width - if I try updating that, it doesn't work - it seems I need to completely redraw the shadow or something in order to update the width, right?

thanks so much this library is incredible in just how many details have been provided for developers to make good use of.