search

mifi / editly

Slick, declarative command line video editing & API
MIT License
4.75k stars 309 forks source link

Fabric js TypeError: Cannot read property 'clearRect' of null with animate() function #180

Open dennisideaonce opened 2 years ago

dennisideaonce commented 2 years ago

Fabric js has a method to animate the object:

            addedObject.animate('top', obj.top, {
              duration: 3000,
              onChange: canvas.requestRenderAll.bind(canvas),
              easing: fabric.util.ease['easeOutBack']
            });

I have some animations, which are done using the animate method. The problem is it gives me Cannot read property 'clearRect' of null. It is specifically due to onChange line in the animate function.

Error: Uncaught [TypeError: Cannot read property 'clearRect' of null]
    at reportException (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
    at Timeout.callback [as _onTimeout] (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/jsdom/lib/jsdom/browser/Window.js:645:7)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7) TypeError: Cannot read property 'clearRect' of null
    at klass.clearContext (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/fabric/dist/fabric.js:9317:11)
    at klass.renderCanvas (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/fabric/dist/fabric.js:9427:12)
    at klass.renderAll (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/fabric/dist/fabric.js:9358:12)
    at klass.renderAndReset (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/fabric/dist/fabric.js:9374:12)
    at Timeout.callback [as _onTimeout] (/Users/dennis/Documents/projects/ideaonce/backend/node_modules/jsdom/lib/jsdom/browser/Window.js:643:19)

I followed this example: https://github.com/mifi/editly/blob/master/examples/customFabric.js

Any help is highly appreciated! Fabric js animate method: http://fabricjs.com/animation-easing

dennisideaonce commented 2 years ago

This works when we use in frontend(with fabric library) that is without editly. We are trying to create video of fabric js generated animations!

mifi commented 2 years ago

I think these kind of animations will not work in editly unfortunately, because editly renders frame by frame