Out of Memory issue:

[mix3d]

Upon attempting to render on an M3, 16GB ram Macbook Pro: the empty rendering toolbar shows with a blank background, and nothing else happens.

The following console log is important:

Uncaught (in promise) RangeError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': Out of memory at ImageData creation
    at p (main.js:1:43928)
    at zt.oncreate (main.js:1:44208)
    at AsyncFunction.h (main.js:1:6633)
    at main.js:1:19651
    at h (main.js:1:19908)
    at main.js:1:19994

[mix3d]

Can't really use Gifcap anymore. Sad. Is this a mac Mx chip problem? I recall this worked correctly on my older M1 macbook.

[learnasteve]

Same issue here on Chrome with Mac M3. Sad day for humanity. T_T

Works on Safari!

[voalvu]

also got this issue when trying to render after recording a webpage for ~30 seconds.

    at p (main.js:1:43928)
    at zt.oncreate (main.js:1:44208)
    at AsyncFunction.h (main.js:1:6633)
    at main.js:1:19651
    at h (main.js:1:19908)
    at main.js:1:19994

i did manage to save my output with a hacky workaround script.
this can be pasted into devconsole to get a webm (probably lower quality than what gifcap tries to save but fails):

(function() {
  // Get the canvas element and its context
  const canvas = document.querySelector('.target');
  if (!canvas) {
    console.error("Canvas with class 'target' not found!");
    return;
  }
  const ctx = canvas.getContext('2d');

  // canvas.captureStream to record at 30 fps (adjust if needed)
  const stream = canvas.captureStream(30);
  const recordedChunks = [];

  // setup MediaRecorder webm (adjust MIME type if needed)
  const options = { mimeType: 'video/webm;codecs=vp9' };
  let mediaRecorder;
  try {
    mediaRecorder = new MediaRecorder(stream, options);
  } catch (e) {
    console.error("MediaRecorder initialization failed:", e);
    return;
  }

  mediaRecorder.ondataavailable = event => {
    if (event.data && event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };

  mediaRecorder.onstop = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'canvas_animation.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.remove();
    }, 100);
    console.log("Recording complete and download initiated.");
  };

  // Start recording
  mediaRecorder.start();
  console.log("recording started...");

  let startTime = null;
  let animationFinished = false;

  function animate(timestamp) {
    if (!startTime) startTime = timestamp;
    const elapsed = timestamp - startTime;


    // Stop animation after X ms, in my case it was ~30 seconds
    if (elapsed > 29615) {
      animationFinished = true;
    }

    if (!animationFinished) {
      requestAnimationFrame(animate);
    } else {
      // Stop recording when the animation finishes
      mediaRecorder.stop();
      console.log("Animation finished, stopping recording...");
    }
  }

  requestAnimationFrame(animate);
})();

[ktaragorn]

This happened to me on Chrome on Windows 10, on a longish video, ~30s, I was able to get it to work by using it on Firefox and capturing the full screen to get the chrome, and this worked.