# How to save a transparent gif （without background）？

**URL:** <https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [June 10, 2020, 6:26am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730 "2020-06-10T06:26:08Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 10, 2020, 6:26am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/1 "2020-06-10T06:26:08Z")

</div>

When the png is ok（without background，transparent）.，I use canvas to save the gif，but I always get a gif with a black background .  
I used a method to replace black with transparency, but there will still be black residue on the graph ( I have used “clear()” )  
I think maybe it have a better way to save the gif ？

```auto
      var gif = new GIF({
        workers: 2,
        quality: 10,
        transparent: 0xffffff
      });

      var canvasElement = document.getElementById('defaultCanvas0');
      var context = canvasElement.getContext('2d');
      console.log(canvasElement)
      for (var i = 0; i< 10; i++) {
        console.log(i)
        gif.addFrame(canvasElement, {delay: 10});
      }

      gif.on('finished', function(blob) {
        console.log(blob)
        console.log('download')
        const a = document.createElement("a");
        const url = window.URL.createObjectURL(blob);
        const filename = 'rain.gif';
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
      });
    
      gif.render();
    },
  }

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 10, 2020, 8:44am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/2 "2020-06-10T08:44:40Z")

</div>

Hi,

Welcome to the community! 🙂

First of all, it’s better to insert code directly inside your message by using the `</>` button on the forum rather than putting an image.

Is it pseudo code? Because the syntax looks like JavaScript but there’s some errors…

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 10, 2020, 9:04am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/3 "2020-06-10T09:04:37Z")

</div>

okey，i change the question…

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [June 11, 2020, 6:43am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/4 "2020-06-11T06:43:04Z")

</div>

GIF does not support alpha transparency. It has only on/off pixels. Pixels are either transparent or fully opaque. It means that there’s no antialiasing for transparency and that causes borders to pixelate and sometimes showing the background color.  
It’s how the file format is defined and there’s no way around it.

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 11, 2020, 7:00am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/5 "2020-06-11T07:00:45Z")

</div>

emmmmm，maybe I need to save the mov？… 🤔

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [June 11, 2020, 7:36am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/6 "2020-06-11T07:36:32Z")

</div>

I guess it depends on how you create imagery and what you intend to do with it. If you can save imagery frame by frame then I would save them as png and use suitable external program to create animated PNG or movie.

I don’t know if Processing has support for direct movie making.

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 11, 2020, 8:18am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/7 "2020-06-11T08:18:09Z")

</div>

Oh, I see. emmmmm， 🤔 I can use adobe or other way to make the many png change into the gif ,but my user is hard to make the translucen GIF。okey，I think I will make the Order PNGs into Compressed package.

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [June 11, 2020, 8:33am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/8 "2020-06-11T08:33:12Z")

</div>

Prosessing IDE has a Tools-\>Movie Maker, but it makes movs(?). I have tried animated gifs, but files have been far too big and I ended using better compressed video formats. Web is full of (free) tools to make animated gifs from files. You can use at least Adobe Photoshop to make videos from images, but it is a bit cumbersome in CS6. Later version might be nicer but I haven’t used them nor Premiere.

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [June 11, 2020, 1:25pm UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/9 "2020-06-11T13:25:58Z")

</div>

There is a nice photoshop (circa 2020 version) tutorial titled “Creating Animated GIFs in Photoshop” on LinkedIn learning on how to animate images with transparent background. Very straightforward.  
🤓

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 12, 2020, 12:23am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/10 "2020-06-12T00:23:49Z")

</div>

![未标题-4](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/45ad5825ff277674e359c20576278ba435c70a24.png)

---

<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:** [June 12, 2020, 12:55am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/11 "2020-06-12T00:55:29Z")

</div>

@ffewaghdfh, are you using p5.js? In the web browser?

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 12, 2020, 1:25am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/12 "2020-06-12T01:25:08Z")

</div>

yes，I know gif need to in web，I have deployed （superficial. I found some websites that are made of p5js. The effect is very good, but the GIF cannot be saved. So I’m going to solve this problem…

---

<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:** [June 12, 2020, 1:28am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/13 "2020-06-12T01:28:50Z")

</div>

No, what I mean is, there are two related languages

1. Processing, which is Java-based, and runs on the desktop:

```auto
PImage img;
void setup() {
  size(400,400);
}
void draw() {
  background(220);
}

```

1. p5.js, which is JavaScript based, and runs on the browser:

```auto
var img;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(220);
}

```

**Which are you using for your project?** Because it has been unclear, you are getting a mix of answers for both. But they are different, and the same thing won’t work in both languages.

---

<div class="post-metadata">

**Author:** ![ffewaghdfh](https://avatars.discourse-cdn.com/v4/letter/f/7ab992/32.png) [@ffewaghdfh](https://discourse.processing.org/u/ffewaghdfh)\
**Post date:** [June 12, 2020, 1:34am UTC](https://discourse.processing.org/t/how-to-save-a-transparent-gif-without-background/21730/14 "2020-06-12T01:34:17Z")

</div>

I am using p5.js. 🙋‍♂️