blendMode() not working in WebGL mode

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.4.2

Web browser and version

Firefox 104.0.1

Operating System

MacOS 12.5.3

Steps to reproduce this

Steps:

• Set blendMode to something non default (e.g. MULTIPLY)
• Change from 2D mode to WebGL mode
• Overlapping colours don't blend the same way

Snippet:

WebGL	function setup() { createCanvas(400, 400, WEBGL); } function draw() { background(255); blendMode(MULTIPLY); noStroke(); fill('red'); circle(-width/4, -height/4, width); fill('blue'); circle(width/4, height/4, width); }
2D	function setup() { createCanvas(400, 400); } function draw() { background(255); translate(width/2, height/2); blendMode(MULTIPLY); noStroke(); fill('red'); circle(-width/4, -height/4, width); fill('blue'); circle(width/4, height/4, width); }

[davepagurek]

It looks like manually calling drawingContext.enable(drawingContext.BLEND) fixes this. Maybe something should be setting this internally

[Qianqianye]

This might also relate to issue #4562