# Saving The Screen As An Image

**URL:** <https://discourse.processing.org/t/saving-the-screen-as-an-image/46484>\
**Category:** Beginners\
**Created:** [May 29, 2025, 10:59pm UTC](https://discourse.processing.org/t/saving-the-screen-as-an-image/46484 "2025-05-29T22:59:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fredstout](https://avatars.discourse-cdn.com/v4/letter/f/258eb7/32.png) [@fredstout](https://discourse.processing.org/u/fredstout)\
**Post date:** [May 29, 2025, 10:59pm UTC](https://discourse.processing.org/t/saving-the-screen-as-an-image/46484/1 "2025-05-29T22:59:44Z")

</div>

I want to enable the a person using my application to select an area on the screen. When selected, a window will open with details about what was selected. When finished, the screen area used to show details would be refreshed to the original.  
I am thinking that if there was a way to save the entire screen as an image, a simple load image would do the job. Is this possible?

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [May 30, 2025, 5:17am UTC](https://discourse.processing.org/t/saving-the-screen-as-an-image/46484/2 "2025-05-30T05:17:54Z")

</div>

Typically, a sketch, particularly an animated one, would store its geometry or images in data structures from which it can render and re-render the scene. If you want to draw a pop-up over part of your scene, you would remove it by simply redrawing the scene again without the pop-up.

If you have a complex pixel-based scene that the user has generated such as from a drawing program, you would save that in an image. In Processing, you would most likely use a `PGraphics` which lets you issue drawing commands (`line()`, `rect()`, etc.) to it which you can display using `image()`. You can then draw your pop-up on top of that image.

For instance, click and drag to draw on your image. Press a key to see a pop-up where the mouse is.

```auto
PGraphics img;

void setup() {
  size( 800, 800 );
  img = createGraphics( 800, 800 );
  img.beginDraw();
  img.background( 64 );
  img.fill( 128, 64, 192 );
  img.rect( 100, 100, 300, 500 );
  img.fill( 64, 192, 96 );
  img.circle( 400, 400, 300 );
  img.endDraw();
}

void draw() {
  image( img, 0, 0 );
  if( keyPressed ) {
    push();
    translate( mouseX, mouseY );
    fill(255);
    rect( 0, 0, 200, 100 );
    fill(0);
    textSize( 20 );
    text( "This is a pop-up", 30, 50 );
    pop();
  }
}

void mouseDragged() {
  img.beginDraw();
  img.stroke( 255 );
  img.strokeWeight(3);
  img.line( pmouseX, pmouseY, mouseX, mouseY );
  img.endDraw();
}

```

---

<div class="post-metadata">

**Author:** ![fredstout](https://avatars.discourse-cdn.com/v4/letter/f/258eb7/32.png) [@fredstout](https://discourse.processing.org/u/fredstout)\
**Post date:** [May 30, 2025, 1:24pm UTC](https://discourse.processing.org/t/saving-the-screen-as-an-image/46484/3 "2025-05-30T13:24:55Z")

</div>

You have given me a great deal to think about. Image processing is new to me (I really am a beginner) and I see the advantages immediately. My project is profiling a railroad in 100 foot segments. Its scalable using a X axis scale expressed in pixels per foot and a Y scale expressed as the altitude within a range. I see now that I have an opportunity to learn.  
Thank you very much,I greatly appreciate your help.