[Bug]: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

[nkemcels]

CheckList

• I am filing a BUG report.
• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/na7xo3gf/

Steps To Reproduce

1. Go to https://jsfiddle.net/na7xo3gf/
2. Run the code
3. This fiddle loads a specific svg to fabric js canvas.
4. Try to resize the svg to a very small size

Expected Behavior

When this SVG is resized to a very small height, it should resize without any issues at this height.

Actual Behavior

However, the SVG completely disappears from the canvas and the following error is thrown.
Note that this doesn't happen with other SVGs. There's something about this one that crashes fabric.

Error Message & Stack Trace

fabric.min.js:1 Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at i._applyPatternForTransformedGradient (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:152769)
    at i._setStrokeStyles (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:149392)
    at i._renderStroke (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:152079)
    at i._renderPaintInOrder (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:151559)
    at i._render (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:188539)
    at i.drawObject (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:148022)
    at i.render (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:146479)
    at i.drawObject (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:193762)
    at i.renderCache (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:146770)
    at i.render (https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js:1:146392)

[asturur]

This happens because some stroke gets converted to a pattern based gradients and with some calculations we are going below 1 to 0. This can be fixed probably, is an extreme edge case it tho. having a smaller SVG that trigger the issue would help

[asturur]

This is fixed in 6.0 already, backports are low priority.
You can check the fix in 6.0 here:

  _applyPatternForTransformedGradient(
    ctx: CanvasRenderingContext2D,
    filler: TFiller
  ) {
    const dims = this._limitCacheSize(this._getCacheCanvasDimensions()),
      pCanvas = createCanvasElement(),
      retinaScaling = this.getCanvasRetinaScaling(),
      width = dims.x / this.scaleX / retinaScaling,
      height = dims.y / this.scaleY / retinaScaling;
    // in case width and height are less than 1px, we have to round up.
    // since the pattern is no-repeat, this is fine
    pCanvas.width = Math.ceil(width);  // <--- this is the fix
    pCanvas.height = Math.ceil(height);  // <--- this is the fix
    const pCtx = pCanvas.getContext('2d');
    if (!pCtx) {
      return;
    }

You can open a PR to apply the same fix to 5.x

[asturur]

Check if this build fix the issue: #9965
If i don't get feedback i wont publish it

[nkemcels]

Hello @asturur ,
Thanks a lot for your quick responses. Sorry I was away.
Will check on this by the end of the day and give you an update.

[nkemcels]

@asturur
I can confirm that this build fixes the issue. Thanks again!

[asturur]

thanks