BlendMode(MULTIPLY) is slow in Firefox


I have noticed quite a difference in rendering speed between browsers depending on blendMode.
When I run the following code, it runs fast in Chrome and Edge, but slow in Firefox.

function setup() {
  let c = createCanvas(400, 400);
  //c.drawingContext.globalCompositeOperation = 'multiply';

function draw() {
  for(let i=0;i<1000;i++){

It seems that the MULTIPLY calculation is taking a long time, since there is no difference in blendMode(BLEND).

I tried JS native blendMode instead of p5js blendMode, but it is still slow MULTIPLY.

Is there any workaround for this?
If anyone knows, I would appreciate it if you could let me know!

I independently just ran into the same thing…

I made this quick and dirty test… I find that the performance degrades very quickly after 170 circles in same frame. No idea why. Does it do the same for you?

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 1);

let total = 0;
let fr = 0;
let circles = 50;
let totalFrames = 50;

function draw() {
  if(fr >= 50) 
    console.log(" circles:"+circles+" avg time (ms):"+total/fr);
    fr = 0;
    total = 0;
  let timer = millis();
  for(var i = 0;i < circles; i++)
    circle(100, 100, 100);
1 Like

Hello Ryan! Thank you for your comment, I appreciate it.
I ran your code in my chrome and Firefox, and as you said, Firefox is about 50 times slower.

You and I seem to have the same problem. I am beginning to think this is difficult to avoid. Hmmm…

Unfortunately, this only gets worse with larger canvases. I’ve had to abandon blend mode in my art piece. and stick to BLEND and ADD as the only safe blend modes.

1 Like

I might do the same…
On another subject, shader is also slow in FF.
FF is troublesome.