# Overlay video on PNG (w/ transparent bg) =\> Sequence of PNGs

**URL:** <https://discourse.processing.org/t/overlay-video-on-png-w-transparent-bg-sequence-of-pngs/32054>\
**Category:** Libraries\
**Created:** [September 1, 2021, 9:09pm UTC](https://discourse.processing.org/t/overlay-video-on-png-w-transparent-bg-sequence-of-pngs/32054 "2021-09-01T21:09:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ishback](https://avatars.discourse-cdn.com/v4/letter/i/d9b06d/32.png) [@ishback](https://discourse.processing.org/u/ishback)\
**Post date:** [September 1, 2021, 9:09pm UTC](https://discourse.processing.org/t/overlay-video-on-png-w-transparent-bg-sequence-of-pngs/32054/1 "2021-09-01T21:09:20Z")

</div>

Hello,  
I’m trying to overlay a video (played at a size let’s say 50x50pixels) on top of a PNG with transparent background. My goal is to get a GIF out of it, for which I’d probably need to save a PNG for each frame.

I’ve tried doing that with loadImage and the video library, but the background of the resulting PNG is not transparent. Any ideas on how could I achieve that outcome?

Thank you

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [September 4, 2021, 11:01am UTC](https://discourse.processing.org/t/overlay-video-on-png-w-transparent-bg-sequence-of-pngs/32054/2 "2021-09-04T11:01:12Z")

</div>

If I understand correctly, what you want is to output a PNG file that preserves the original transparency of the image (I guess generating a sequence is not relevant in this particular problem).

To do this I think you need to render it on PGraphics instead of the original window to preserve alpha. This is a starting point:

```java
PGraphics pg;

void setup() {
  size(800,800);
  pg = createGraphics(width, height);
}

void draw() {
  pg.beginDraw();
  pg.clear();
  pg.ellipse(200,200,300,300);
  pg.endDraw();
  image(pg, 0, 0);

  pg.save("image.png");
  noLoop();
}

```