# blendMode problems

**URL:** <https://discourse.processing.org/t/blendmode-problems/1116>\
**Category:** p5.js\
**Created:** [June 20, 2018, 9:51am UTC](https://discourse.processing.org/t/blendmode-problems/1116 "2018-06-20T09:51:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![renderga](https://avatars.discourse-cdn.com/v4/letter/r/9de0a6/32.png) [@renderga](https://discourse.processing.org/u/renderga)\
**Post date:** [June 20, 2018, 9:51am UTC](https://discourse.processing.org/t/blendmode-problems/1116/1 "2018-06-20T09:51:06Z")

</div>

Hi! First post here! My name is Azur and I’m a P5js beginner, love the library and the Kadenze course!

I write this post because I’m having a problem with the blendMode function, hope somebody can help me.

Here’s an screenshot:

 ![screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/639fffb54cd2db8320dd7686834c67fd436a029d.png)

As you can see here it’s like the blendMode overwrites the background function and disable the refreshing of the canvas.

Does anyone knows how to solve this?

Thanks!

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [June 20, 2018, 10:34pm UTC](https://discourse.processing.org/t/blendmode-problems/1116/2 "2018-06-20T22:34:02Z")

</div>

Use this code:

```auto
var angle = 1;
function setup() {
createCanvas(800,800);
}

function draw() {
  createCanvas(800,800);
  background(255);
  translate(300,300);
  rotate(radians(angle));
  noStroke();
  scale(2);
  blendMode(MULTIPLY);
  fill(255,0,0);
  ellipse(30,30,60,60);
  fill(0,255,0);
  ellipse(60,60,60,60);
  fill(0,0,255);
  ellipse(60,30,60,60);
  angle++;
}

```

---

<div class="post-metadata">

**Author:** ![renderga](https://avatars.discourse-cdn.com/v4/letter/r/9de0a6/32.png) [@renderga](https://discourse.processing.org/u/renderga)\
**Post date:** [June 21, 2018, 7:26am UTC](https://discourse.processing.org/t/blendmode-problems/1116/3 "2018-06-21T07:26:53Z")

</div>

@madscientist Thanks! That’s a nice solution.

I thought about using clear(); but I think creating the canvas within draw() is better. Specially if you’re using windowWidth and windowHeight,

---

<div class="post-metadata">

**Author:** ![alexr4](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/alexr4/32/576_2.png) [@alexr4](https://discourse.processing.org/u/alexr4)\
**Post date:** [July 19, 2018, 4:20pm UTC](https://discourse.processing.org/t/blendmode-problems/1116/4 "2018-07-19T16:20:00Z")

</div>

Does creating the canvas at each frame is not bad for performance ?

You can also reset the blendMode at the end of the draw by using `blendMode(NORMAL)` such as :

```auto
  background(255);
  translate(300,300);
  rotate(radians(angle));
  noStroke();
  scale(2);
  blendMode(MULTIPLY);
  fill(255,0,0);
  ellipse(30,30,60,60);
  fill(0,255,0);
  ellipse(60,60,60,60);
  fill(0,0,255);
  ellipse(60,30,60,60);
  angle++;
  
  blendMode(NORMAL);

```

---

<div class="post-metadata">

**Author:** ![renderga](https://avatars.discourse-cdn.com/v4/letter/r/9de0a6/32.png) [@renderga](https://discourse.processing.org/u/renderga)\
**Post date:** [July 21, 2018, 9:49am UTC](https://discourse.processing.org/t/blendmode-problems/1116/5 "2018-07-21T09:49:02Z")

</div>

Great! thanks, I wanted to avoid creating canvas each frame, nice solution!