search

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
http://fabricjs.com
Other
28.52k stars 3.47k forks source link

SVGs with paths that use gradient for the stroke cause toDataURL() to fail and canvas to become unresponsive #7798

Open graphics-et-al opened 2 years ago

graphics-et-al commented 2 years ago

Version

4.6.0 and higher

Test Case

https://jsfiddle.net/wilheim/3kvhzwbn/58/

Information about environment

Browser: Chrome and Firefox

Steps To Reproduce

  1. Load/import an SVG with a path that uses a gradient for a stroke, e.g. 
    <svg xmlns="http://www.w3.org/2000/svg" height="80" width="300">
<defs>
<linearGradient id="linear-gradient" x1="305.8" x2="502.7" y1="97" y2="97" gradientUnits="userSpaceOnUse">
  <stop offset="0" stop-color="#a0a0a0"/>
  <stop offset="1" stop-color="#828282"/>
</linearGradient>
</defs>
<g fill="none">
<path stroke="red" d="M5 20 l215 0" />
<path stroke="black" d="M5 40 l215 0" />
<path stroke="url(#linear-gradient)" d="M5 60 l215 0" />
</g>
</svg>

    2) Attempt canvas.toDataURL

Expected Behavior

Expected: a dataURL to save as an image of the board

Actual Behavior

Got: an error, and canvas becomes unresponsive. Error in console (using uncompressed FabricJS 5.1.0) is:

Uncaught DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at klass._applyPatternForTransformedGradient (http://localhost:8080/js/board/fabric.5.1.0.js:15923:30)
    at klass._setStrokeStyles (http://localhost:8080/js/board/fabric.5.1.0.js:15662:18)
    at klass._renderStroke (http://localhost:8080/js/board/fabric.5.1.0.js:15885:12)
    at klass._renderPaintInOrder (http://localhost:8080/js/board/fabric.5.1.0.js:15828:14)
    at klass._render (http://localhost:8080/js/board/fabric.5.1.0.js:19789:12)
    at klass.drawObject (http://localhost:8080/js/board/fabric.5.1.0.js:15551:12)
    at klass.render (http://localhost:8080/js/board/fabric.5.1.0.js:15409:14)
    at klass.drawObject (http://localhost:8080/js/board/fabric.5.1.0.js:20360:26)
    at klass.renderCache (http://localhost:8080/js/board/fabric.5.1.0.js:15424:14)
    at klass.render (http://localhost:8080/js/board/fabric.5.1.0.js:15403:14)
stale[bot] commented 2 years ago

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.