How to use with fabric.js?

[let4be]

I'm trying to use this library with fabric.js

Capturing like this

canvas.on('after:render', () => {
    capturer.capture( $canvas );
});

it works and saves the data, but it's low fps, I specified 120 fps in ccapture but always get ~40

[spite]

Interesting. Could you post a working online example of what you're trying? It'll help me debug and figure out what's going on.

[galacto]

any updates on this?

[spite]

Not really, but as long as you render to a canvas with non-frame dependant animations, and pass the canvas to CCapture, you should be good.

[MoSofi]

I have used this library to save a fabric.js animations and videos as a video file. It worked perfectly for me. I used the following code:

const canvas = document.getElementById('canvas');

fabric.util.requestAnimFrame(function render() {
    fabric.util.requestAnimFrame(render);
    capturer.capture(canvas);
});

[myselfgaurav]

@DevelopSmith can u help me with some working example as i am unable to make it work

[Mat-thieu]

I think ccapture can't capture fabric js. I looked into fabric's source and it's using new Date() for lots of things and I believe that's just not being overwritten by ccapture:

Methods supported so far:

Date.now, Date.prototype.getTime
setTimeout, clearTimeout, setInterval (clearInterval pending)
requestAnimationFrame
performance.now
HTMLVideoElement.prototype.currentTime, HTMLAudioElement.prototype.currentTime

but please, correct me if I'm wrong because I need this to work

[spite]

It might be similar to https://twitter.com/thespite/status/733254647922753536 Can you post code that i can run to try to reproduce the issue?

[Mat-thieu]

To solve it I used a custom implementation using https://github.com/schickling/timemachine to overwrite the Date constructor

Edit: I was wrong, I used this for a backend implementation sorry

[KristofferBerg]

It would be really nice if anyone could give an example on Fiddle, cos I'm really lost here. Here's my starting point: https://jsfiddle.net/BrandApp_io/cgno71r9/64/ But it skips way too many frames.

[Mat-thieu]

@KristofferBerg Does this solve it? I find it hard to test

https://jsfiddle.net/93bkform/

I moved ccapture script load above fabric, removed the defer attribute. Then made sure to launch ccapture first so it might be able to work its magic on fabric before fabric starts. I also moved your onChange on the .animate() function to the render loop canvas.renderAll.

If this doesn't solve it, I believe fabric uses a rendering loop in .animate() that ccapture maybe can't overwrite.

[Mat-thieu]

@KristofferBerg sorry it doesn't solve it, ran a few tests and it's inconsistent.. :/

[KristofferBerg]

@Mat-thieu Thanks for testing. Yeah, I'm starting to suspect this line https://github.com/fabricjs/fabric.js/blob/master/src/util/animate.js#L73 have something to do with it :/

[dan-bruma]

The issue seems to be here. It's using the initial window.requestAnimationFrame, not the "patched" one.

This code should "proxy" the call, just add it before loading fabric.js:

<script>
  (function() {
    var __ = window.requestAnimationFrame;

    window.requestAnimationFrame = function() {
      var args = arguments;
      (args.callee === args.callee.caller ? __ : window.requestAnimationFrame).apply(window, args);
    };
  })();
</script>