editly icon indicating copy to clipboard operation
editly copied to clipboard

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

Open dennisideaonce opened this issue 3 years ago • 2 comments

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 avatar Feb 08 '22 04:02 dennisideaonce

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!

dennisideaonce avatar Feb 08 '22 13:02 dennisideaonce

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

mifi avatar Feb 27 '22 05:02 mifi