# How to export Canva Render has GIF with CSS modification

**URL:** <https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781>\
**Category:** Beginners\
**Created:** [March 23, 2021, 11:21pm UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781 "2021-03-23T23:21:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![TuringMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turingmedia/32/12530_2.png) [@TuringMedia](https://discourse.processing.org/u/TuringMedia)\
**Post date:** [March 23, 2021, 11:21pm UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781/1 "2021-03-23T23:21:34Z")

</div>

I’m using **p5.js** to make a GIF animation but I have an issue when I want to export it.  
  
I did a pixelased effect on my animation by adding these css properties to the Canva (140\*140 because I need a blur to apply image-rendering: pixelated) :

```
image-rendering: pixelated;
width:500px;
height:500px;

```

My problem is that I can’t export this Canva with the properties I added. (I’m using CCapture)  
  
My gif is in 140x140 without the pixelated effect.

How can I get the rendering I need?

Canva with CSS attributes (What I want to export has GIF) :  
 ![66fad62bf4e9397b8a964bfd933b7aa0](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/568cfb05f5f8452bace50b69890f7f14fd9c1a0f.png)

Canva without CSS attributes (140x140) :  
[![](https://i.ibb.co/pL7rVnR/0000001.jpg) ](https://i.ibb.co/pL7rVnR/0000001.jpg)

---

<div class="post-metadata">

**Author:** ![TuringMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turingmedia/32/12530_2.png) [@TuringMedia](https://discourse.processing.org/u/TuringMedia)\
**Post date:** [March 24, 2021, 12:09am UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781/2 "2021-03-24T00:09:29Z")

</div>

If you want to check the code : [GitHub - yurkth/astraea: A planet generator inspired by Planetarium.](https://github.com/yurkth/astraea)

---

<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:** [March 24, 2021, 7:39am UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781/3 "2021-03-24T07:39:11Z")

</div>

Hi! Welcome to the forum!

First of all I saw that you opened an issue on the repository too - it’s totally fine to remix someone’s open source project (and it’s good to do so) but you always have to credit them and you cannot pretend that it’s your project.

Do you mean canvas? As commented by the author I think you have to do post editing. Or you can perhaps change the original code to render with `rect` to make pixelation effect because what is passed to the canvas element is not pixelated yet (which is passed to [ccapture.js](https://github.com/spite/ccapture.js/) library I guess - by the way, a link to these libraries helps too!!) and only pixelated when rendered on the browser.

---

<div class="post-metadata">

**Author:** ![TuringMedia](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/turingmedia/32/12530_2.png) [@TuringMedia](https://discourse.processing.org/u/TuringMedia)\
**Post date:** [March 24, 2021, 10:36am UTC](https://discourse.processing.org/t/how-to-export-canva-render-has-gif-with-css-modification/28781/4 "2021-03-24T10:36:55Z")

</div>

Hello,

> First of all I saw that you opened an issue on the repository too - it’s totally fine to remix someone’s open source project (and it’s good to do so) but you always have to credit them and you cannot pretend that it’s your project.

Sorry was not the goal, I will do this better next time !

The owner helped me with the export render.  
The pixelated effect was apply but the only issue was the 140x40 render.

He told me this :

> But I think you can use [ImageMagick](https://imagemagick.org/index.php).  
> Rename the 140x140 GIF to `in.gif` and run the command will output a 500x500 GIF.

```auto
convert in.gif -coalesce -filter point -resize 500x out.gif

```