search

fabricjs / fabric.js

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

how to apply a color gradient to the underlining of a text #9726

Open asturur opened 8 months ago

asturur commented 8 months ago

Discussed in https://github.com/fabricjs/fabric.js/discussions/9665

Originally posted by **Pablituuu** February 12, 2024 You can apply a gradient color to text without problems, but when applying underline or linethrough to the text, its color is not applied to these options. Only if the text color is solid can it be applied. Is there a solution for this? I leave the link of the reproduction: https://jsfiddle.net/Pablituuu/8h3j7L26/39/
mspanish commented 3 months ago

Seems like this would be related, so I'll add it here. It would be great to be able to set the color for underlining. I'm building a note taking app, and underlining something in red for example would be a handy feature.

asturur commented 3 months ago

Yes would be nice at least for underline and strike. Not sure why we have overline tho. In order for this to work a series of decision needs to be taken, like how do i target the underine at a specific place in the text style, underlineFIll? and why underline has no fill and stroke? and then there is risk of a lot of extra features.

asturur commented 3 months ago

Is also not hard to build, someone could give a stab to it if they are not afraid or bothered by long pr review process

mspanish commented 3 months ago

Overline is actually kind of cool as it makes a block of text stand out in your note taking (used with underline is what has kind of a cool effect). Is there any way to hack this to add it quickly? I see the fn that applies it is _renderTextDecoration - but since 6+ I'm not really sure how I could override that, the new syntax kind of throws me.