# How do I draw something and then save it as an Image?

**URL:** <https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033>\
**Category:** Beginners\
**Created:** [September 17, 2019, 9:37pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033 "2019-09-17T21:37:39Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 17, 2019, 9:37pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/1 "2019-09-17T21:37:39Z")

</div>

When I draw something on a custom offscreen PGraphics and then save the file it is a blank image with alpha 0 on all pixels.  
How is PImage and PGraphics supposed to be used to save an image drawn?  
Worth mentioning is that I want to draw to an offscreen PGraphics since the main PGraphics is used for displaying other info.

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [September 17, 2019, 9:56pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/2 "2019-09-17T21:56:23Z")

</div>

When we want to alter a PGraphic we add the name of that particular object in front of functions (see [PGraphics reference](https://processing.org/reference/PGraphics.html) as an example). We can apply that same principle with the **save()** function.

Does that do what you had in mind?

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 17, 2019, 10:39pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/3 "2019-09-17T22:39:24Z")

</div>

well, i draw onto pgraphics using its methods ( rect, image, etc ) but when i save it as a .png, it’s a blank file with all alpha on 0 ( all on 0, basically default value )

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 17, 2019, 10:56pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/4 "2019-09-17T22:56:36Z")

</div>

can you make a short but complete code example  
what shows us the way you use PGraphics  
and produces that faulty .png file ?

* * *

[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)  
[https://processing.org/reference/save\_.html](https://processing.org/reference/save_.html)

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 17, 2019, 11:14pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/5 "2019-09-17T23:14:03Z")

</div>

on mobile

pgraphics g = new pgraphics()  
g.rect(0,0,10,10)  
g.save (“1.png”)

also tried creategraphics( 200,500) but to no avail

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [September 17, 2019, 11:58pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/6 "2019-09-17T23:58:33Z")

</div>

It works for this example, which saves the PGraphic as a red, 100 x 100 png file:

```auto
PGraphics pg;

void setup() {
  size(400, 400);
  noLoop();
  pg = createGraphics(100, 100);
}

void draw() {
  background(250);
  pg.beginDraw();
  pg.background(255, 0, 0);
  pg.endDraw();
  pg.save("test.png");
}

```

If you can’t get it to work for your sketch please share your code once you’re at you computer 🙂

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 18, 2019, 6:37am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/7 "2019-09-18T06:37:03Z")

</div>

ah so the begindraw and enddraw are required. that was probably the problem. probs to you.  
i was tired of using the slow workaround that converted it into a java bufferedimage.  
ill try it when im on pc

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 18, 2019, 11:06pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/8 "2019-09-18T23:06:38Z")

</div>

That’s right.

> **[PGraphics / Reference](https://processing.org/reference/PGraphics.html)**
>
> Main graphics and rendering context, as well as the base API implementation for processing "core". Use this class if you need to draw into an off-screen graphics buffer. A PGraphics object can be cons…

> The **beginDraw()** and **endDraw()** methods (see above example) are necessary to set up the buffer and to finalize it.

You will sometimes get an error if you don’t call beginDraw – but sometimes you don’t. If you don’t call endDraw, however, your drawing hasn’t been finalized, so you are probably saving an empty buffer.

This is similar in some ways to pixel manipulation with loadPixels, savePixels – on the main canvas or on a PImage.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 19, 2019, 1:00am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/9 "2019-09-19T01:00:58Z")

</div>

> [@LoliProcessor](#):
>
> I want to draw to an offscreen PGraphics since the main PGraphics is used

this is understandable, and @Tiemen show you how to do it correcty,  
but the way to develop coding ?  
stay closer to the reference & examples until you get it working…

may i suggest to:

- first show what you draw ( even only for diagnostic with a disable logic )
- and save on demand / if ok / only…

```auto
PGraphics pg;
int pgw=100, pgh=100; // adjust here picture size in pix
boolean diagi = true, diagpg = true; // diagnostic switches
long intro = 8000; // show key operation for 8 sec 
String outfile = "data/pg.png"; // save() creates the directory if not exists

void make_pg() {
  pg = createGraphics(pgw, pgh);
  pg.beginDraw();
  pg.background(200, 200, 0);
  pg.fill(0, 200, 0);
  pg.stroke(0, 200, 200);
  pg.strokeWeight(10);
  pg.circle(pgw/2, pgh/2, pgw/2-10);
  pg.endDraw();
}

void setup() {
  size(400, 400);
  make_pg();
  fill(0);
}

void draw() {
  background(200);
  if ( diagpg ) // show the pg first for check
    image(pg, 10, 10); 
  if ( diagi ) // show info at startup
    text("use: key [s] save pg as picture, [p] toggle show it on canvas", 10, height-20);
  timer();
}

void keyPressed() {
  if ( key == 's' ) pg.save(outfile);
  if ( key == 'p' ) diagpg = ! diagpg;
}

void timer() {
  if ( diagi && millis() > intro ) diagi = false;
}

```

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 19, 2019, 7:38am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/10 "2019-09-19T07:38:56Z")

</div>

So when I draw on the main canvas without begin draw and end draw it is basically drawing with no buffers?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 19, 2019, 9:31am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/11 "2019-09-19T09:31:30Z")

</div>

you still owe us your code,  
as i am not able to reproduce that empty file  
with anything like your from mobile posted text.

you might have found a leak?

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 19, 2019, 10:07am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/12 "2019-09-19T10:07:08Z")

</div>

using createGraphics without beginDraw actually results in a null pointer on the image field in PGraphics.  
I expected PGraphics to save from the pixels of PImage but PGraphicsJava2D actually overwrites loadPixels and has an own Image field which is probably written to when I use beginDraw / endDraw.

PGraphics pg = new PGraphics();

pg.setSize( 50, 50 );

pg.rect( 0, 0, 10, 10 );

pg.save( dataPath( “a.png” ) );

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 19, 2019, 10:24am UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/13 "2019-09-19T10:24:30Z")

</div>

thanks,  
so the

```auto
pg.setSize( 50, 50 );

```

make the THING to run without error  
but not produce a content in the picture file

where did you find that  
`< PGraphics >.setSize()`

?working? command?

\_  
because

```auto
PGraphics pg = new PGraphics();
pg = createGraphics(100, 100);
//pg.setSize( 50, 50 );
pg.beginDraw();
pg.rect( 0, 0, 10, 10 );
//pg.endDraw();
pg.save( dataPath( "a.png" ) );

```

works,  
but requires beginDraw  
works without endDraw() funny???

* * *

i think it just change the size, but not creates a buffer.  
sadly the drawing to a not existing buffer gives no error???

anyhow a good way to use it would be:

```auto
PGraphics pg = new PGraphics();
pg = createGraphics(0,0);
pg.setSize( 50, 50 );
pg.beginDraw();
pg.rect( 0, 0, 10, 10 );
pg.endDraw();
image(pg,0,0);
pg.save( dataPath( "a.png" ) );

```

---

<div class="post-metadata">

**Author:** ![LoliProcessor](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@LoliProcessor](https://discourse.processing.org/u/LoliProcessor)\
**Post date:** [September 19, 2019, 9:13pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/14 "2019-09-19T21:13:12Z")

</div>

does it produce an empty image without enddraw?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 19, 2019, 10:08pm UTC](https://discourse.processing.org/t/how-do-i-draw-something-and-then-save-it-as-an-image/14033/15 "2019-09-19T22:08:21Z")

</div>

that is strange,

```auto
PGraphics pg;
pg = createGraphics(0,0);
pg.setSize( 50, 50 );
pg.beginDraw();
pg.rect( 0, 0, 10, 10 );
//pg.endDraw();
image(pg,0,0);
pg.save("data/a.png");

```

as you can test in seconds yourselves  
this produces a picture file with rect shown,  
BUT it not show the rect in the canvas.  
for this the endDraw() is required.