chore(): Update canvas and jsdom

[asturur]

Description

The main update here is canvas 3.x hopefully is easier to handle in the cd/ci

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

• Run Next Template
• Run Node Template
• Run Vanilla Template
• Run Vue Template

[github-actions]

Build Stats

file / KB (diff)	bundled	minified
fabric	927.112 (0)	307.398 (0)

[Smrtnyk]

Have you considered on moving to vitest for unit tests and executing tests in real browser?
that way you can use real canvas for testing and not fake jsdom one
https://vitest.dev/guide/browser/
vitest has jest compatible API so I guess it wouldn't be that much work migrating unit tests

btw jest isn't seeing much love lately, it is barely maintained and I am questioning its future to be honest

[asturur]

The issue is that 70% of our unit tests are still on QUnit.
Then we have playwright.
Ideally unit tests won't run in the browser and will just test the fabricJS code and not require a real canvas, but just a mocked one.
Visual tests will run both in the browser and node throught playwright and would be based on browser or JSDOM + canvas and test also output of the canvas.

Vitest should be api compatibile with jest, and easy replacement, but before doing anything like that i would like to see qunit replaced.

So what we have now is a middle ground because there is no firepower to rewrite all the unit tests

[asturur]

To be clear if you want to open a PR to swap jest with vitest and and have it running in node only for now, you are welcome to do so, as long as it can support canvas with JSDOM is all good

[Smrtnyk]

To be clear if you want to open a PR to swap jest with vitest and and have it running in node only for now, you are welcome to do so, as long as it can support canvas with JSDOM is all good

I am interested in this so will have a look at this on the weekend

[Smrtnyk]

hm, vitest also requires minimum support of node18
I have all tests running now in vitest, but I had to up node to 18
but with this you don't need this all ceremony with custom environment
with vitest you just install jsdom 26 and canvas v3 and tests just work

[Smrtnyk]

@asturur I have create a draft PR #10420
all tests are working for me locally in vitest now
maybe you would want to merge it with this branch?
in there I am using newest jsdom and canvas v3 and this acrobatics with custom environment should not be needed

[asturur]

This requires bumping up node from 16 to 18, meaning fabric 7.0 which sound painful as of today for me

[asturur]

maybe i should call it 7.0 and move on, who cares.

[konser80]

pls update to canvas 3 & jsdom 26 🙏

[ezze]

I am here because I was unable to install fabric on Ubuntu 22.04 using Node 22.14.0. Here is related issue: Automattic/node-canvas#2448.

I have to stick to Node 20 for now due to this.

[asturur]

Since node 22 is LTS and probably it won't be fixed on canvas 2, we should accelerate this.
I have 2 prs to merge before this one.

[Stanzilla]

Hey there, was wondering where on the roadmap this currently sits, been having a bunch of CI issues because of Canvas and found this PR that might help.

[asturur]

This is a breaking change because of node16, and i wanted to push in a couple of fixes before marking the major version.
Together with this one will go probably the removal of originX/originY and the removal of opacity from color stops of gradients.
In order to document that nicely i need to update the website with versioned docs too.

[github-actions]

Coverage after merging canvas-jsdom into master will be

85.49%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
fabric.ts	86.92%	20%	0%	95.79%	10, 144, 144, 144, 144, 144, 190, 190, 190, 190, 190, 31, 33, 33, 33, 33, 33–34, 34, 34, 34, 34, 39, 8
index.node.ts	14.29%	100%	0%	25%	23, 26, 29, 41, 44, 47
extensions/aligning_guidelines/util
basic.ts	100%	100%	100%	100%
extensions/data_updaters/origins
index.ts	97.50%	75%	100%	100%	22–23
src
ClassRegistry.ts	92.54%	69.23%	100%	97.92%	35, 56
Collection.ts	75.29%	42.31%	51.61%	84.67%	130, 153, 155–157, 159, 167, 169–170, 181, 197, 217, 228, 241, 243, 245, 252, 254, 263, 265, 270, 279, 281, 286–287, 302, 304, 306, 309–310, 327–328, 328–329, 333–334, 337–338, 338–344, 346–348, 350, 75, 99
CommonMethods.ts	89.86%	69.23%	83.33%	96%	50, 52, 9
EventTypeDefs.ts	100%	100%	100%	100%
Intersection.ts	82.37%	43.82%	73.33%	96.14%	105, 132–133, 166, 184–190, 228, 228, 237, 239, 289–291, 297, 297, 78, 80
Observable.ts	74.59%	51.35%	31.25%	86.36%	144, 153, 156, 168, 170, 172, 175, 41, 43, 68–70, 72, 76, 78, 80, 82–85, 87–91
Point.ts	84.95%	62%	44.12%	92.68%	104, 117, 148, 157, 179, 197, 206, 216, 225, 236–239, 259, 284–285, 294–297, 328, 341, 349, 359, 95
Shadow.ts	81.93%	15%	37.50%	90%	139, 139–140, 140–141, 143, 145–150, 159, 176, 176, 176, 194, 196–197, 199, 206, 206, 223–230, 232, 232, 234–235
cache.ts	86.75%	62.50%	75%	90.14%	57, 59, 71–72, 74–77
config.ts	82.63%	20%	44.44%	94.20%	127, 135–136, 138–141, 143, 146–147, 151, 156, 156, 156, 156, 156, 156
constants.ts	100%	100%	100%	100%
typedefs.ts	100%	100%	100%	100%
src/LayoutManager
ActiveSelectionLayoutManager.ts	85%	69.23%	28.57%	100%	43
LayoutManager.ts	90.38%	69.62%	53.85%	99.31%	279, 344, 355
constants.ts	100%	100%	100%	100%
index.ts	48.57%	37.50%	80%	66.67%	1, 1, 1–2, 2, 2–3, 3, 3–4, 4, 4–5, 5, 5, 5–6
types.ts	100%	100%	100%	100%
src/LayoutManager/LayoutStrategies
ClipPathLayout.ts	72%	40%	100%	78.95%	39, 41–44, 46–48, 54, 57–58, 66–69
FitContentLayout.ts	100%	100%	100%	100%
FixedLayout.ts	85.71%	20%	100%	100%	23, 23
LayoutStrategy.ts	88.98%	64%	71.43%	97.67%	54, 73, 75, 88
utils.ts	62.90%	7.14%	100%	78.72%	28–32, 34–35, 39, 39–44, 47, 47, 47
src/Pattern
Pattern.ts	52.30%	2.94%	10%	63.08%	105–107, 113, 113–114, 117, 117–119, 119, 119–122, 130–132, 132, 132, 132, 132, 132–138, 140–141, 143, 150, 150, 150, 150, 153–160, 160, 160–164, 174–175, 175, 175, 175–176, 176, 176–182, 182, 182, 182–183, 183, 183–188, 190–199, 203–206, 209–210, 212–214, 216–218, 218, 218–221, 33, 37
index.ts	50%	100%	100%	50%	2
types.ts	100%	100%	100%	100%
src/brushes
BaseBrush.ts	79.19%	9.09%	14.29%	88.55%	110, 114, 114–115, 122, 122, 122, 124–125, 130, 135, 143, 146, 155, 155, 155, 155, 155–160, 99
CircleBrush.ts	52.54%	14.29%	12.50%	58.25%	100–108, 108–118, 122, 130–139, 55, 67, 69, 76, 76, 78–79, 79, 83, 85–86, 92–98
PatternBrush.ts	44.12%	0%	0%	53.57%	21, 25–34, 36, 43, 43–44, 51–53, 53, 53–54, 60–64, 64, 64–69
PencilBrush.ts	42.18%	0%	0%	52.02%	103, 116, 122, 124, 129, 138–139, 146, 146–147, 147, 147–152, 152, 152, 152, 155–158, 167–169, 176, 176, 176, 176–177, 181–185, 185, 185, 185, 188–205, 215, 224–232, 235–238, 244, 244–257, 257–266, 274–276, 276–280, 280–299, 54, 54, 68, 71, 71, 71–72, 75, 84, 87, 87–88, 88, 88, 91, 91, 91–92, 92
SprayBrush.ts	52.25%	0%	0%	58.86%	100, 107, 107, 107, 107–112, 118–120, 122, 128–135, 137–139, 141, 141, 141–148, 148, 152, 157, 162, 164, 169–170, 172, 180, 182, 185, 187, 195, 198–200, 200, 200–207, 207, 207–210, 212, 22, 67, 85–87, 94–99
typedefs.ts	100%	100%	100%	100%
src/canvas
Canvas.ts	77.85%	37.69%	87.50%	88.11%	1000–1005, 1029, 1031–1034, 1037, 1042, 1046, 1050–1051, 1056, 1088, 1088, 1095, 1101, 1113, 1116, 1141, 1160, 1163, 1167, 1174, 1177, 1179, 124, 1240–1244, 1278, 1323–1327, 1351, 1354, 1369–1371, 1371, 1375, 1375, 1417–1453, 1455, 1457–1458, 1460–1462, 1466, 1468, 1470–1472, 1475–1480, 1483–1485, 1488, 1490, 1504, 1511, 1513–1529, 1529–1530, 1532–1533, 1537–1538, 1540–1542, 1545–1547, 1550, 193, 329, 339, 364, 380, 399, 442, 454, 558, 558,