Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dennisideaonce opened this issue Feb 8, 2022 · 2 comments

Comments

@dennisideaonce
Copy link

dennisideaonce commented Feb 8, 2022

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 dennisideaonce changed the title Fabric jh Fabric js video doesn't have the remote images from remote. Feb 8, 2022
@dennisideaonce dennisideaonce changed the title Fabric js video doesn't have the remote images from remote. Fabric js TypeError: Cannot read property 'clearRect' of null with animate() function Feb 8, 2022
@dennisideaonce
Copy link
Author

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
Copy link
Owner

mifi commented Feb 27, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants