# BlendMode（MULTIPLY) is slow in Firefox

**URL:** <https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156>\
**Category:** p5.js\
**Created:** [July 30, 2022, 12:40am UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156 "2022-07-30T00:40:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [July 30, 2022, 12:40am UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156/1 "2022-07-30T00:40:06Z")

</div>

Hello!

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.

```auto
function setup() {
  let c = createCanvas(400, 400);
  
  blendMode(MULTIPLY);
  
  //c.drawingContext.globalCompositeOperation = 'multiply';
}

function draw() {
  clear();
  
  for(let i=0;i<1000;i++){
    fill(random(255),random(255),random(255));
    circle(random(400),random(400),10);
  }
}

```

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.

> **[CanvasRenderingContext2D.globalCompositeOperation - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation)**
>
> The
> CanvasRenderingContext2D.globalCompositeOperation
> property of the Canvas 2D API sets the type of compositing operation to apply when
> drawing new shapes.

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

---

<div class="post-metadata">

**Author:** ![ryangreen8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ryangreen8/32/16740_2.png) [@ryangreen8](https://discourse.processing.org/u/ryangreen8)\
**Post date:** [August 1, 2022, 6:31pm UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156/2 "2022-08-01T18:31:14Z")

</div>

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?

```auto
function setup() {
  createCanvas(400, 400);
  blendMode(MULTIPLY);
  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);
    circles+=10;
    fr = 0;
    total = 0;
    return;
  }
  fr++;
  let timer = millis();
  for(var i = 0;i < circles; i++)
  {
    fill(.9);
    noStroke();
    circle(100, 100, 100);
  }
  total+=millis()-timer;
}

```

---

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [August 2, 2022, 2:51pm UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156/3 "2022-08-02T14:51:45Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![ryangreen8](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ryangreen8/32/16740_2.png) [@ryangreen8](https://discourse.processing.org/u/ryangreen8)\
**Post date:** [August 2, 2022, 6:18pm UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156/4 "2022-08-02T18:18:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [August 3, 2022, 3:29am UTC](https://discourse.processing.org/t/blendmode-multiply-is-slow-in-firefox/38156/5 "2022-08-03T03:29:19Z")

</div>

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