Fabric.js: Multiple shadows support?

Created on 2 Nov 2016 · 8Comments · Source: fabricjs/fabric.js

Does Fabric supports the functionality of adding multiple shadows? If not, how can i implement it by the simple way?
Needed to create more solid text glows

setShadow('0 0 25 rgba(255,0,0,1), 0 0 25 rgba(255,0,0,1)');

Source

DangerD256

All 8 comments

we use canvas shadow that is only one. if you want to create text glow you should clone your text as image ( function available ) and then put some filters over it.

asturur on 2 Nov 2016

👍1

Hmm, need to keep text editable, can you please point me to that function so I can proceed
Thanks in advance

DangerD256 on 2 Nov 2016

i do not think fabric is ready yet for this. It requires a lot of custom code.
In fabric 2.0 object caching should be on by default, and filters will be applicable to all objects, with webgl

Then it will be easier to do something like that without digging too much in canvas api, because you will be able to grab a custom shader and apply to an object.

Object caching is planned for 1.7.0 and is quite ready, there is a PR open.
2.0 is in a branch but require still lot of work to be released as functional.

asturur on 2 Nov 2016

Okay, so making it as image object, tried image filter blur here:
fabricjs.com/image-filters
It works but makes so little blur, but need to increase it's size, will try to increase copied image size and more top left a bit.

And what function transforms text element to image, can't find it...

DangerD256 on 2 Nov 2016

👍1

Resolved it by cloning several times text object with shadow and merging it to group, but i had to rewrite a lot of code to update each cloned element if user changes some shadow effect/text/font size etc.

DangerD256 on 7 Nov 2016

and you have also risk of some shadow going over something else with colors that havr opacity lesser than 1. this is the reason why i told you that in my opinion is not ready yet.

can i see a screen of result?

asturur on 7 Nov 2016

left text - simple text wit shadow
right text - cloned texts several times (Adjustable by multiplier input)