mifi / mifi/editly

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

Open
#180 2 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.