upgrade fabricjs

examples/gradients.json5

@@ -0,0 +1,12 @@
+{
+  outPath: './gradients.mp4',
+  defaults: {
+    transition: { name: 'linearblur', duration: 0.1 },
+  },
+  clips: [
+    { duration: 1, layers: [{ type: 'linear-gradient', colors: ['#02aab0', '#00cdac'] }] },
+    { duration: 1, layers: [{ type: 'radial-gradient', colors: ['#b002aa', '#ac00cd'] }] },
+    { duration: 1, layers: [{ type: 'linear-gradient' }] },
+    { duration: 1, layers: [{ type: 'radial-gradient' }] },
+  ],
+}

package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "canvas": "^2.6.1",
     "execa": "^4.0.0",
-    "fabric": "^3.6.3",
+    "fabric": "^4.1.0",
     "file-type": "^14.1.4",
     "file-url": "^3.0.0",
     "fs-extra": "^9.0.0",

sources/fabricFrameSource.js

@@ -152,19 +152,21 @@ async function radialGradientFrameSource({ width, height, params }) {
     const cx = 0.5 * rect.width;
     const cy = 0.5 * rect.height;
 
-    rect.setGradient('fill', {
+    rect.set('fill', new fabric.Gradient({
       type: 'radial',
+      coords: {
         r1,
         r2,
         x1: cx,
         y1: cy,
         x2: cx,
         y2: cy,
-      colorStops: {
-        0: colors[0],
-        1: colors[1],
       },
-    });
+      colorStops: [
+        { offset: 0, color: colors[0] },
+        { offset: 1, color: colors[1] },
+      ],
+    }));
 
     canvas.add(rect);
   }
@@ -181,16 +183,18 @@ async function linearGradientFrameSource({ width, height, params }) {
   async function onRender(progress, canvas) {
     const rect = getRekt(width, height);
 
-    rect.setGradient('fill', {
+    rect.set('fill', new fabric.Gradient({
+      coords: {
         x1: 0,
         y1: 0,
         x2: width,
         y2: height,
-      colorStops: {
-        0: colors[0],
-        1: colors[1],
       },
-    });
+      colorStops: [
+        { offset: 0, color: colors[0] },
+        { offset: 1, color: colors[1] },
+      ],
+    }));
 
     rect.rotate(progress * 30);
     canvas.add(rect);