Upgrade Fabric project from 1.6.3 to 3.6.x

Question

I've been using fabric.js for a long time in one of my canvas projects. Currently, my project is built upon version 1.6.3 of fabric.

Now, due to its limitations with animations and the same have been resolved in recent versions. I would like to upgrade it to 3.6.x But while doing that, I realised there are tons of depreciation and upgrades to it. My project currently has some 20k lines of code. Doing this manually is certainly not a viable option.

Can anyone suggest a better solution? Possibly a migration script or alike to save myself.

Answer 1

To my knowledge there is no upgrade/migration script to automate the process of getting your code working under the latest version of Fabric.js. To get you started though, here are a few tips.

Upgrading from v1.6.3 to v2.x

Fabric.js version v2.x has probably the biggest breaking changes of the major versions. In addition to several methods that were removed, there are significant changes to how image height and width is handled in order to accommodate the new image cropping functionality. The following guide outlines these changes, and also includes some sample code to help with deserializing pre-v2.0 JSON strings.

• http://fabricjs.com/changes-introduction
• http://fabricjs.com/v2-breaking-changes
• http://fabricjs.com/v2-breaking-changes-2

Beginning with v2.4.0, clipPath support was added which allows you to clip an object or the canvas with another Fabric object. The clipTo method which was the previous means of doing this is now marked as depreciated, so if your project uses clipTo you should really begin making this transition. See this 4-part guide to better understand the new functionality.

• http://fabricjs.com/clippath-part1
• http://fabricjs.com/clippath-part2
• http://fabricjs.com/clippath-part3
• http://fabricjs.com/clippath-part4

Upgrading from v2.x to v3.x

Fabric.js v3.x has fewer breaking changes than v2.x. Support for Node 4 and 6 was removed and object caching is now required under some circumstances rather than being optional, but this upgrade is more about new features than big changes.

See http://fabricjs.com/changelog for a detailed list of changes across each version.

Upgrading from v3.x to v4.x

I've included this section as well because although at this point the v4.x branch is still in beta, there are quite a few breaking changes that mostly involve the removal of old methods. If you make these changes now you can still run your project on the v3.x branch until v4.x leaves beta.

One big change is that the clipTo method has finally been removed, so if you're still using clipTo you will need to make the move to using clipPath .

The biggest improvement coming in v4.x is a new custom control interface. With this system, you'll be able to customize the function of each control, add icons, and even new controls to your objects. See the following demos for help with the new system.

• http://fabricjs.com/custom-control-render
• http://fabricjs.com/custom-controls-polygon

See https://github.com/fabricjs/fabric.js/releases for a current list of changes and removed methods in the v4.x branch.

Have fun!