shadowBlur overlays on top of fill

[micuat]

Most appropriate sub-area of p5.js?

• [ ] Color
• [x] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 1.0.0
• Web browser and version: firefox 77.0.1 / chrome 83.0.4103.97 (Official Build) (64-bit)
• Operating System: windows 10
• Steps to reproduce this:

https://editor.p5js.org/micuat/sketches/R7YwWXnJU

The shadow of the stroke goes on top of the filled surface.

Actually, the problem is here https://github.com/processing/p5.js/blob/main/src/core/p5.Renderer2D.js#L524-L529

When I reverse the order of fill and stroke like in this sketch, this problem goes away https://editor.p5js.org/micuat/sketches/2I_nsQDEN

If reversing the order doesn't affect anything, then I will make a PR

[micuat]

I haven't looked closely but other drawing functions may have the same issue

[micuat]

obviously the side effect is that the shadow goes on top of stroke :( https://editor.p5js.org/micuat/sketches/_LAKGQ7Xz

[limzykenneth]

obviously the side effect is that the shadow goes on top of stroke :(

That's not ideal. 😞 We may need to look for some other way to fix this. If folding the drop shadow functionality into the library itself (in the form of shadow() function for example) would help solve this, it could be considered I think.

[Ashley-Y-Lin]

Is anyone currently working on this? If not I'd be interested in looking into it, starting with the suggestion above!

[micuat]

I’m not working on it and if you already have ideas you should try and make a PR!

Now I see it from a different viewpoint though - I think inherently this is not trivial to solve (like transparency/depth in 3d). Rather I’d suggest writing a documentation about how these parameters would collide and what practices you can apply to avoid “weird” drawing results (e.g., draw filled shape with shadow, then turn off the shadow and draw the stroke)

On Sat, Mar 25, 2023 at 7:25 Ashley Lin @.***> wrote:

Is anyone currently working on this? If not I'd be interested in looking into it, starting with the suggestion above!

— Reply to this email directly, view it on GitHub https://github.com/processing/p5.js/issues/4619#issuecomment-1483740391, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOAASPSSFWMJWTHZHDLH3DW52FUPANCNFSM4NXD2LGQ . You are receiving this because you authored the thread.Message ID: @.***>

[davepagurek]

Do you think the documentation for drawingContext would be a good spot for that? Maybe updating the example there and adding some comments in the code to explain?

[micuat]

It sounds good to me, but this specific example may be too daunting to be in the references. I’m not in the loop right now so I can’t make a good suggestion, yet this topic definitely should be documented somewhere.

On Sat, Mar 25, 2023 at 13:11 Dave Pagurek @.***> wrote:

Do you think the documentation for drawingContext would be a good spot for that? Maybe updating the example there and adding some comments in the code to explain?

— Reply to this email directly, view it on GitHub https://github.com/processing/p5.js/issues/4619#issuecomment-1483808512, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAOAASN37UYW6E6NJQAJLFTW53OFLANCNFSM4NXD2LGQ . You are receiving this because you authored the thread.Message ID: @.***>

[davepagurek]

Another option might be as a tutorial on the p5js site, maybe accompanied with some other drawingContext features one might want to use such as using .clip() and linear/radial gradients?

Docs on that are here: https://github.com/processing/p5.js-website/blob/main/src/templates/pages/learn/README.md