How to export Canva Render has GIF with CSS modification

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) :

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 140×140 without the pixelated effect.

How can I get the rendering I need?

Answer

There is a difference between the width & height you can set for a HTML element e.g. <canvas width='140' height='140'> and the CSS width & height properties.

The former defines the actual size of the canvas – 140x 140in this case.

If we now set the CSS width & height to something deviating from the HTML element’s width & height e.g. <canvas width='140' height='140' style='width: 500px; height:500px;'> the actual size in pixels of the canvas does not change – it stays 140 x 140 pixels. The CSS properties just control the displayed size of the element inside the browser, meaning the 140 x 140 are simply stretched to 500 x 500.

So if you get actual pixel data of the canvas – for exporting to gif/png – the final image will have the original dimensions of the canvas – not the rendered.

The fix is quite simple though. Instead of directly using the source canvas for exporting, draw it’s content on a second canvas, the size of your desired resolution.

To force the ‘export’ canvas to not use any filtering/smoothing, you need to set the imageSmoothingEnabled property of it’s context to false.

Here’s an example (you can right-click and save both images to see the difference):

var ctx = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);

  let sourceCanvas = document.getElementById("canvas");
  let virtualWidth = parseInt(getComputedStyle(sourceCanvas).width);
  let virtualHeight = parseInt(getComputedStyle(sourceCanvas).height);
  var canvas = document.getElementById("exportCanvas");
  canvas.width = virtualWidth;
  canvas.height = virtualHeight;
  canvas.getContext('2d').imageSmoothingEnabled = false;
  canvas.getContext('2d').drawImage(sourceCanvas, 0, 0, virtualWidth, virtualHeight);
}

image.src = 'https://mdn.mozillademos.org/files/12640/cat.png';
canvas {
  width: 500px;
  height: 500px;
}
<span>Rendered canvas</span><br>
<canvas id="canvas" width="140" height="140"></canvas><br>
<span>Export canvas</span><br>
<canvas id="exportCanvas"></canvas>