blendMode() not working right in firefox on windows 10

[hellonearthis]

I was working on this https://www.openprocessing.org/sketch/854431 and noticed it doesn't look the same when opened in firefox vs how it looks in chrome. This problem only seems to affect windows and not apple os

Most appropriate sub-area of p5.js?

• [x] Core/Environment/Rendering

Details about the bug:

• p5.js version: 1.0.0

• Web browser and version: Chrome 80.0.3987.149 Firefox 75.0b6

• Operating System: Microsoft Windows 10 Professional Build 18363

• Steps to reproduce this: https://www.openprocessing.org/sketch/854431 load this sketch in chrome and firefox and change the blendmode, in firefox it doesn't render properly.

[limzykenneth]

I'm on macOS Firefox 74 (latest stable release) and can't replicate this. @hellonearthis Can you try Firefox 74 on Windows to see if it still present as a bug?

[ahujadivyam]

I can't replicate this too, on Ubuntu 18.04

[stalgiag]

I am able to replicate this on Windows 10.0.18362 with Firefox 74.0.

[ahujadivyam]

I am able replicate this bug on Windows 10 firefox but not on Ubuntu 18.04 firefox

[limzykenneth]

Hmm...seems to be Windows only. Anyone has any idea? I'm not familiar enough with Windows to say...

[micuat]

with shadowBlur = 0 it works. So it seems windows+firefox doesn't like globalCompositeOperation and shadowBlur together. I don't know if it's related but quick search showed this: https://stackoverflow.com/questions/34028717/canvas-shadow-with-globalcompositeoperation-destination-out

[smrnjeet222]

Firefox 87.0 (64-bit) on Windows 10 20H2

shadowBlur = 0	shadowBlur > 0

[bejucoo]

I had the same issue when I used drawingContext.shadowBlur and blendMode(LIGHTEST) in the same function. I tried separating the code in two different functions and now it works properly in Firefox (Windows 10).