Fabric js TypeError: Cannot read property 'clearRect' of null with animate() function
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.5k
- Forks
- 374
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the animate() onChange callback and compare it with examples/customFabric.js. Trace canvas.requestRenderAll through fabric/dist/fabric.js, especially clearContext and renderAll, using the provided jsdom stack. Done means reproducing the null clearRect error and confirming that the animation renders without it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100