# Color blending oddly on PGraphics

**URL:** <https://discourse.processing.org/t/color-blending-oddly-on-pgraphics/1844>\
**Category:** Processing\
**Created:** [July 17, 2018, 6:00am UTC](https://discourse.processing.org/t/color-blending-oddly-on-pgraphics/1844 "2018-07-17T06:00:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobS](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@RobS](https://discourse.processing.org/u/RobS)\
**Post date:** [July 17, 2018, 6:00am UTC](https://discourse.processing.org/t/color-blending-oddly-on-pgraphics/1844/1 "2018-07-17T06:00:06Z")

</div>

Blending colors with a PGraphcs object gives odd, undesirable colors:  
 ![18%20pm](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/1X/c4821d1f775b70b7a3cd2f1b5fee8b1329bd6776.png)

In this example I’m blending the same shades of red of and blue, and getting two completely different results… Here’s my code:

```auto
PGraphics merged;

void setup() {
  size(400, 200);
  
  merged = createGraphics(200, 200);
  merged.beginDraw();
  merged.fill(0, 0, 255, 100);
  merged.rect(0, 0, 200, 200);
  merged.fill(255, 0, 0, 100);
  merged.rect(0, 0, 200, 200);
  merged.endDraw();
}

void draw() {
  background(100);
  
  // Merged on the canvas
  fill(0, 0, 255, 100);
  rect(0, 0, 200, 200);
  fill(255, 0, 0, 100);
  rect(0, 0, 200, 200);
  
  // Merged in a PGraphics object
  image(merged, 200, 0);
  
  fill(255);
  text("Blending on canvas", 20, 20);
  text("Blending in PGraphics object", 220, 20);
}

```

Shouldn’t these two colors be the same? How can I get the PGraphics object to blend colors properly? Thanks.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [July 17, 2018, 6:13am UTC](https://discourse.processing.org/t/color-blending-oddly-on-pgraphics/1844/2 "2018-07-17T06:13:04Z")

</div>

```
merged.background(100); // ?
```

---

<div class="post-metadata">

**Author:** ![RobS](https://avatars.discourse-cdn.com/v4/letter/r/c89c15/32.png) [@RobS](https://discourse.processing.org/u/RobS)\
**Post date:** [July 17, 2018, 6:31am UTC](https://discourse.processing.org/t/color-blending-oddly-on-pgraphics/1844/3 "2018-07-17T06:31:16Z")

</div>

Thanks for your reply, that would fix this simple example, but for what I want to do I can’t just throw out the alpha channel of my PGraphics object. Here’s a better example:

Consider this drawing program, where I use a preview PGraphics object to draw to, and then bake it into another one once the mouse is released. The same issue will be present, and I can’t think of how to fix it in this circumstance.

```auto
PGraphics image, preview;

void setup() {
  size(400, 400);
  
  image = createGraphics(400, 400);
  preview = createGraphics(400, 400);
}

void draw() {
  background(0);
  
  // Draw the PGraphics
  image(image, 0, 0);
  image(preview, 0, 0);
  
  if(mousePressed) {
    preview.beginDraw();
    preview.strokeWeight(20);
    preview.stroke(255, 0, 0, 128);
    preview.blendMode(REPLACE);
    preview.line(pmouseX, pmouseY, mouseX, mouseY);
    preview.endDraw();
    preview.blendMode(BLEND);
  }
}

void mouseReleased() {
  // Bake the preview & reset
  image.beginDraw();
  image.image(preview, 0, 0);
  image.endDraw();
  preview = createGraphics(400, 400);
}

```

I want to retain the alpha in both the preview and image object, while still displaying them properly.