Upgrading to Fabric.js 7.0

FabricJS 7.0 will be released shortly, this is a preview of the breaking changes and an upgrade guide.

Breaking changes

Fabric 7.0 is basically Fabric 6.0 there is no large major change that should stop you from updating.

The reason for the major version change was the will to move to canvas version 3 and higher, that itself required jsdom 26 and that required at least node 18, it was bumped to 20 anyway.

Node 18 was removed too since its support halted in April 2025 and while FabricJS can still run ok on node 18, vitest 4 does not nor do the latest versions of jsdom.

Since a major version bump was happening also the list of supported browsers was refreshed to allow for better transpilation and usage of newer Canvas api.

The current supported platform list looks like this

• NodeJS >= 20
• chrome >= 88
• safari >= 13
• firefox >= 85
• edge >= 88
• Opera >= 73

These browsers have been picked up with date of release of Jan 2021, so browsers that at the moment of release are nearly 5 years old.

On top of supported platform changes, there are some notable api changes:

Changed default values

fireMiddleClick, fireRightClick and stopContextMenu on Canvas

These 3 booleans have been flipped to default TRUE. This mean that mouse up and down even will fire also for these buttons. If you have mouse events that have to be triggered only for the left button, you have to safeguard your event with an early return inspecting the event button property OR changing back the default values to fault.

FabricJS 8.0 will delete these property so changing the default value will not be an option in the future.

Removing Opacity from Gradient ColorStop

FabricJS Gradient class supported ColorStop(s) that had a generic color and an opacity value, mirroring SVG properties. Now this required that each render we would look at both the color value for the color-stop and its opacity value and we would mix the 2, parsing a color value each render.

We decided to drop support for the opacity value and left the only opacity at the color value. This will still allow you to have semi transparent gradients, but the way you specify or animate the transparency is different.

The ColorStop type changes are:

export type ColorStop = {
  color: string;
  offset: number;
  opacity?: number;
};

The color string supported an alpha value before and still does it, the double opacity is gone, together with its confusion and performance hit.

If your application was doing heavy usage of the opacity property and was saving user data, there is an update you can use to keep the old data working. You can find it in

import { installGradientUpdater } from 'fabric/extensions';

installGradientUpdater();

It will wrap the fromObject function of Gradient to take care of the difference. It is still suggested to clean up your old data when possible.

Changes to findTarget

Canvas.findTarget has been refactored. Its result is now cached for the duration of the event, it finds all the possible targets and uses them where needed for drag actions or normal actions. The refactor was done mainly to have clearer code since the existing findTarget function was hard to read and maintain

Removed deprecations

Events

The data duplication between pointer/absolutePointer and viewportPoint/scenePoint has been removed. Now you find only viewportPoint and scenePoint in the events

Canvas

• getCenter method has been removed, use only getCenterPoint
• The internal cache variables _pointer and _absolutePointer have been renamed to _viewportPoint and _scenePoint for clarity
• preserveObjectStacking is now default to true, if you want objects to break the stack when selected, set it to false
• getPointer deprecated method has been removed, is now a protected _getPointerImpl method.
• setWidth and setHeight are gone, use only setDimensions({ width, height })

Objects

Text

• unused method _getSVGLineTopOffset has been deleted

Itext

• protected _exitEditing is merged with exitEditingImpl public

Image

• CSS_CANVAS static property from image is gone also with the classList.Add requirement

Utils

• rotatePoint is gone, use point.rotate instead
• request is gone. We use fetch, node 18 supports fetch. There is no reason to use the old request object and status
• setStyle is gone
• parseAttributes, parseStyleAttribute, parseFontDeclaration, parsePointsAttribute, parseTransformAttribute and getCSSRules have been removed from the package. Those utils were meant for internal usage and never for exposing this part of the api.

Non breaking changes

Thanks to the efforts of @Smrtnyk QUnit was remove and the unit tests have been migrated to vitest. DevDependencies and lint rules have been cleaned up too and Github actions now works also on PR from forks.