# PGraphics color and saving

**URL:** <https://discourse.processing.org/t/pgraphics-color-and-saving/23748>\
**Category:** Coding Questions\
**Created:** [September 8, 2020, 10:33pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748 "2020-09-08T22:33:24Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 8, 2020, 10:33pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/1 "2020-09-08T22:33:24Z")

</div>

Trying to get offscreen graphics working. Two issues I’m running into:

(1) The coloring is off. HSB(0, 100, 100) should be a nice bright red. And when I draw directly on the main canvas, it is. Drawing to pg first and then composing onto the screen turns it into a gray/green color.

(2) I can’t find a way to get it to save as anything but a completely black image. I saw a workaround posted for an earlier release that suggested pulling it into a PImage first, so I tried that, but it doesn’t help. Neither does the async disable hint.

Hopefully I’m missing something obvious here!

```auto
    private PGraphics pg;

    public void settings() {
        size(400, 400, P2D);
    }

    public void setup() {
        pg = createGraphics(200, 200, P2D);
        pg.hint(PConstants.DISABLE_ASYNC_SAVEFRAME);
        pg.smooth(8);
        pg.colorMode(HSB, 360, 100, 100, 1.0f);
        colorMode(HSB, 360, 100, 100, 1.0f);
    }

    public void draw() {
        pg.beginDraw();
        pg.fill(0, 100, 100);
        pg.rect(0,0, pg.width,pg.height);
        pg.endDraw();

        // this works
        image(pg, 0,0); 
        
        // this doesn't work (saves completely black image)
        pg.save("C:\\temp\\foo.png"); 
        
        // this doesn't work either
        PImage pi = pg.get();
        pi.save("C:\\temp\\foo.png"); 
        
        noLoop();
    }

```

---

<div class="post-metadata">

**Author:** ![raron](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/raron/32/13651_2.png) [@raron](https://discourse.processing.org/u/raron)\
**Post date:** [September 8, 2020, 11:55pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/2 "2020-09-08T23:55:00Z")

</div>

Had a go at this.

Apparently, P2D or any of the other documented renderers for createGraphics doesn’t work? (P2D, P3D, SVG and maybe PDF. I couldn’t test PDF because of some other error I didn’t resolve atm). Tried FX2D but that didn’t work either.

But if you don’t specify one, it works. I don’t know what renderer it uses then.

Also, use colorMode after beginDraw.

```auto
private PGraphics pg;

public void settings() {
  size(400, 400, P2D);
}

public void setup() {
  colorMode(HSB, 360, 100, 100, 1.0f);
}

public void draw() {
  pg = createGraphics(200, 200);
  //pg.hint(PConstants.DISABLE_ASYNC_SAVEFRAME);
  pg.smooth(8);

  pg.beginDraw();
  pg.colorMode(HSB, 360, 100, 100, 1.0f);

  pg.fill(0, 100, 100);
  pg.rect(0, 0, pg.width-1, pg.height-1);
  pg.endDraw();

  // this works
  image(pg, 0, 0); 

  // this doesn't work (saves completely black image)
  pg.save("foo.png"); 

  // this doesn't work either
  //PImage pi = pg.get();
  //pi.save("foo.png"); 

  noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 9, 2020, 12:35am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/3 "2020-09-09T00:35:54Z")

</div>

Thanks for taking a look!

Code diving says

```auto
    public PGraphics createGraphics(int w, int h) {
        return this.createGraphics(w, h, "processing.awt.PGraphicsJava2D");
    }

```

So, I guess this is a bug. [The docs specifically say you should be able to createGraphics with other renderers](https://processing.org/reference/createGraphics_.html).

---

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 9, 2020, 12:43am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/4 "2020-09-09T00:43:31Z")

</div>

Reported issue [https://github.com/processing/processing/issues/6094](https://github.com/processing/processing/issues/6094).

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 9, 2020, 2:13am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/5 "2020-09-09T02:13:45Z")

</div>

I know that some stuff like pg.fill(); works outside, but it seems colorMode doesn’t.

-\> put it in between beginDraw() and endDraw(). works for me.

```auto
PGraphics pg;
public void settings() {
  size(400, 400, P2D);
}
public void setup() {
  pg = createGraphics(200, 200, P2D);
  pg.beginDraw();
  pg.colorMode(HSB, 100, 100, 100, 255);
  pg.endDraw();        
  colorMode(HSB, 100, 100, 100, 255);
}

public void draw() {
  pg.beginDraw();
  pg.fill(0, 100, 100);
  pg.rect(0, 0, pg.width, pg.height);
  pg.endDraw();
  // this works
  image(pg, 0, 0);        
  // this doesn't work (saves completely black image)
  pg.save("redimage.png"); 
  noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 9, 2020, 3:01am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/6 "2020-09-09T03:01:47Z")

</div>

Yes, thanks for clarifying. Moving the colorMode to after beginDraw fixes that aspect of my problem. The issue I opened is just for the black image on save.

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 9, 2020, 10:33am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/7 "2020-09-09T10:33:17Z")

</div>

that would be an error I cannot help fix. for me, saving it works properly, I get the image in red…the only thing I can think of is trying other formats, but you probably did that already

---

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 9, 2020, 11:34am UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/8 "2020-09-09T11:34:46Z")

</div>

Are you on a different platform? I’m on Windows.

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 9, 2020, 12:45pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/9 "2020-09-09T12:45:18Z")

</div>

yes I am, I use Mac osx

---

<div class="post-metadata">

**Author:** ![mr\_riptano](https://avatars.discourse-cdn.com/v4/letter/m/9dc877/32.png) [@mr\_riptano](https://discourse.processing.org/u/mr_riptano)\
**Post date:** [September 9, 2020, 4:10pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/10 "2020-09-09T16:10:02Z")

</div>

dzaima on github found the problem – you need to call save() before endDraw().

---

<div class="post-metadata">

**Author:** ![Hyperion65](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hyperion65/32/10569_2.png) [@Hyperion65](https://discourse.processing.org/u/Hyperion65)\
**Post date:** [September 9, 2020, 6:22pm UTC](https://discourse.processing.org/t/pgraphics-color-and-saving/23748/11 "2020-09-09T18:22:52Z")

</div>

ah, that’s probably the good way 🙂  
maybe it works too when you but it into its own begin… and end…  
I guess one wants to call the save from elsewhere too, like inside keypressed();