How to export Canva Render has GIF with CSS modification

p5.js Beginners
1

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

Canva without CSS attributes (140x140) :

2

If you want to check the code : GitHub - yurkth/astraea: A planet generator inspired by Planetarium.

3

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 library I guess - by the way, a link to these libraries helps too!!) and only pixelated when rendered on the browser.

4

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.
Rename the 140x140 GIF to in.gif and run the command will output a 500x500 GIF.

convert in.gif -coalesce -filter point -resize 500x out.gif
1 Like