@gjsify/canvas2d-core 0.3.13 → 0.3.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/esm/cairo-utils.js +175 -156
  2. package/lib/esm/canvas-gradient.js +26 -21
  3. package/lib/esm/canvas-path.js +160 -103
  4. package/lib/esm/canvas-pattern.js +60 -55
  5. package/lib/esm/canvas-rendering-context-2d.js +969 -989
  6. package/lib/esm/canvas-state.js +35 -34
  7. package/lib/esm/color.js +259 -234
  8. package/lib/esm/image-data.js +24 -21
  9. package/lib/esm/index.js +5 -11
  10. package/package.json +10 -10
package/lib/esm/cairo-utils.js CHANGED
@@ -1,172 +1,191 @@
1
+ //#region src/cairo-utils.ts
2
+ /**
3
+ * Convert quadratic Bezier control point to cubic Bezier control points.
4
+ * Canvas 2D has quadraticCurveTo but Cairo only has cubic curveTo.
5
+ *
6
+ * Given current point (cx, cy), quadratic control point (cpx, cpy), and end (x, y):
7
+ * cp1 = current + 2/3 * (cp - current)
8
+ * cp2 = end + 2/3 * (cp - end)
9
+ */
1
10
  function quadraticToCubic(cx, cy, cpx, cpy, x, y) {
2
- return {
3
- cp1x: cx + 2 / 3 * (cpx - cx),
4
- cp1y: cy + 2 / 3 * (cpy - cy),
5
- cp2x: x + 2 / 3 * (cpx - x),
6
- cp2y: y + 2 / 3 * (cpy - y)
7
- };
11
+ return {
12
+ cp1x: cx + 2 / 3 * (cpx - cx),
13
+ cp1y: cy + 2 / 3 * (cpy - cy),
14
+ cp2x: x + 2 / 3 * (cpx - x),
15
+ cp2y: y + 2 / 3 * (cpy - y)
16
+ };
8
17
  }
18
+ /**
19
+ * Compute arcTo parameters.
20
+ * Canvas arcTo(x1,y1,x2,y2,radius) draws a line from current point to the tangent point,
21
+ * then an arc of the given radius tangent to both lines (current→p1 and p1→p2).
22
+ *
23
+ * Returns the two tangent points and arc center, or null if degenerate (collinear points).
24
+ */
9
25
  function computeArcTo(x0, y0, x1, y1, x2, y2, radius) {
10
- const dx0 = x0 - x1;
11
- const dy0 = y0 - y1;
12
- const dx1 = x2 - x1;
13
- const dy1 = y2 - y1;
14
- const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
15
- const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
16
- if (len0 === 0 || len1 === 0) return null;
17
- const ux0 = dx0 / len0;
18
- const uy0 = dy0 / len0;
19
- const ux1 = dx1 / len1;
20
- const uy1 = dy1 / len1;
21
- const cross = ux0 * uy1 - uy0 * ux1;
22
- if (Math.abs(cross) < 1e-10) return null;
23
- const dot = ux0 * ux1 + uy0 * uy1;
24
- const halfAngle = Math.acos(Math.max(-1, Math.min(1, dot))) / 2;
25
- const tanDist = radius / Math.tan(halfAngle);
26
- const tx0 = x1 + ux0 * tanDist;
27
- const ty0 = y1 + uy0 * tanDist;
28
- const tx1 = x1 + ux1 * tanDist;
29
- const ty1 = y1 + uy1 * tanDist;
30
- const centerDist = radius / Math.sin(halfAngle);
31
- const bisectX = (ux0 + ux1) / 2;
32
- const bisectY = (uy0 + uy1) / 2;
33
- const bisectLen = Math.sqrt(bisectX * bisectX + bisectY * bisectY);
34
- const cx = x1 + bisectX / bisectLen * centerDist;
35
- const cy = y1 + bisectY / bisectLen * centerDist;
36
- const startAngle = Math.atan2(ty0 - cy, tx0 - cx);
37
- const endAngle = Math.atan2(ty1 - cy, tx1 - cx);
38
- const counterclockwise = cross > 0;
39
- return { tx0, ty0, tx1, ty1, cx, cy, startAngle, endAngle, counterclockwise };
26
+ const dx0 = x0 - x1;
27
+ const dy0 = y0 - y1;
28
+ const dx1 = x2 - x1;
29
+ const dy1 = y2 - y1;
30
+ const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
31
+ const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
32
+ if (len0 === 0 || len1 === 0) return null;
33
+ const ux0 = dx0 / len0;
34
+ const uy0 = dy0 / len0;
35
+ const ux1 = dx1 / len1;
36
+ const uy1 = dy1 / len1;
37
+ const cross = ux0 * uy1 - uy0 * ux1;
38
+ if (Math.abs(cross) < 1e-10) return null;
39
+ const dot = ux0 * ux1 + uy0 * uy1;
40
+ const halfAngle = Math.acos(Math.max(-1, Math.min(1, dot))) / 2;
41
+ const tanDist = radius / Math.tan(halfAngle);
42
+ const tx0 = x1 + ux0 * tanDist;
43
+ const ty0 = y1 + uy0 * tanDist;
44
+ const tx1 = x1 + ux1 * tanDist;
45
+ const ty1 = y1 + uy1 * tanDist;
46
+ const centerDist = radius / Math.sin(halfAngle);
47
+ const bisectX = (ux0 + ux1) / 2;
48
+ const bisectY = (uy0 + uy1) / 2;
49
+ const bisectLen = Math.sqrt(bisectX * bisectX + bisectY * bisectY);
50
+ const cx = x1 + bisectX / bisectLen * centerDist;
51
+ const cy = y1 + bisectY / bisectLen * centerDist;
52
+ const startAngle = Math.atan2(ty0 - cy, tx0 - cx);
53
+ const endAngle = Math.atan2(ty1 - cy, tx1 - cx);
54
+ const counterclockwise = cross > 0;
55
+ return {
56
+ tx0,
57
+ ty0,
58
+ tx1,
59
+ ty1,
60
+ cx,
61
+ cy,
62
+ startAngle,
63
+ endAngle,
64
+ counterclockwise
65
+ };
40
66
  }
67
+ /**
68
+ * Apply an arcTo operation to a Cairo context.
69
+ */
41
70
  function cairoArcTo(ctx, x0, y0, x1, y1, x2, y2, radius) {
42
- const result = computeArcTo(x0, y0, x1, y1, x2, y2, radius);
43
- if (!result) {
44
- ctx.lineTo(x1, y1);
45
- return;
46
- }
47
- const { tx0, ty0, cx, cy, startAngle, endAngle, counterclockwise } = result;
48
- ctx.lineTo(tx0, ty0);
49
- if (counterclockwise) {
50
- ctx.arcNegative(cx, cy, radius, startAngle, endAngle);
51
- } else {
52
- ctx.arc(cx, cy, radius, startAngle, endAngle);
53
- }
71
+ const result = computeArcTo(x0, y0, x1, y1, x2, y2, radius);
72
+ if (!result) {
73
+ ctx.lineTo(x1, y1);
74
+ return;
75
+ }
76
+ const { tx0, ty0, cx, cy, startAngle, endAngle, counterclockwise } = result;
77
+ ctx.lineTo(tx0, ty0);
78
+ if (counterclockwise) {
79
+ ctx.arcNegative(cx, cy, radius, startAngle, endAngle);
80
+ } else {
81
+ ctx.arc(cx, cy, radius, startAngle, endAngle);
82
+ }
54
83
  }
84
+ /**
85
+ * Draw an ellipse on a Cairo context.
86
+ * Canvas ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
87
+ * is implemented via save/translate/rotate/scale/arc/restore.
88
+ */
55
89
  function cairoEllipse(ctx, x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
56
- ctx.save();
57
- ctx.translate(x, y);
58
- ctx.rotate(rotation);
59
- ctx.scale(radiusX, radiusY);
60
- if (counterclockwise) {
61
- ctx.arcNegative(0, 0, 1, startAngle, endAngle);
62
- } else {
63
- ctx.arc(0, 0, 1, startAngle, endAngle);
64
- }
65
- ctx.restore();
90
+ ctx.save();
91
+ ctx.translate(x, y);
92
+ ctx.rotate(rotation);
93
+ ctx.scale(radiusX, radiusY);
94
+ if (counterclockwise) {
95
+ ctx.arcNegative(0, 0, 1, startAngle, endAngle);
96
+ } else {
97
+ ctx.arc(0, 0, 1, startAngle, endAngle);
98
+ }
99
+ ctx.restore();
66
100
  }
101
+ /**
102
+ * Draw a rounded rectangle path on a Cairo context.
103
+ * Implements the Canvas roundRect(x, y, w, h, radii) method.
104
+ */
67
105
  function cairoRoundRect(ctx, x, y, w, h, radii) {
68
- let tl, tr, br, bl;
69
- if (typeof radii === "number") {
70
- tl = tr = br = bl = radii;
71
- } else if (radii.length === 1) {
72
- tl = tr = br = bl = radii[0];
73
- } else if (radii.length === 2) {
74
- tl = br = radii[0];
75
- tr = bl = radii[1];
76
- } else if (radii.length === 3) {
77
- tl = radii[0];
78
- tr = bl = radii[1];
79
- br = radii[2];
80
- } else {
81
- tl = radii[0];
82
- tr = radii[1];
83
- br = radii[2];
84
- bl = radii[3];
85
- }
86
- const maxR = Math.min(w / 2, h / 2);
87
- tl = Math.min(tl, maxR);
88
- tr = Math.min(tr, maxR);
89
- br = Math.min(br, maxR);
90
- bl = Math.min(bl, maxR);
91
- const PI_2 = Math.PI / 2;
92
- ctx.newSubPath();
93
- ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + PI_2);
94
- ctx.arc(x + w - tr, y + tr, tr, -PI_2, 0);
95
- ctx.arc(x + w - br, y + h - br, br, 0, PI_2);
96
- ctx.arc(x + bl, y + h - bl, bl, PI_2, Math.PI);
97
- ctx.closePath();
106
+ let tl, tr, br, bl;
107
+ if (typeof radii === "number") {
108
+ tl = tr = br = bl = radii;
109
+ } else if (radii.length === 1) {
110
+ tl = tr = br = bl = radii[0];
111
+ } else if (radii.length === 2) {
112
+ tl = br = radii[0];
113
+ tr = bl = radii[1];
114
+ } else if (radii.length === 3) {
115
+ tl = radii[0];
116
+ tr = bl = radii[1];
117
+ br = radii[2];
118
+ } else {
119
+ tl = radii[0];
120
+ tr = radii[1];
121
+ br = radii[2];
122
+ bl = radii[3];
123
+ }
124
+ const maxR = Math.min(w / 2, h / 2);
125
+ tl = Math.min(tl, maxR);
126
+ tr = Math.min(tr, maxR);
127
+ br = Math.min(br, maxR);
128
+ bl = Math.min(bl, maxR);
129
+ const PI_2 = Math.PI / 2;
130
+ ctx.newSubPath();
131
+ ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + PI_2);
132
+ ctx.arc(x + w - tr, y + tr, tr, -PI_2, 0);
133
+ ctx.arc(x + w - br, y + h - br, br, 0, PI_2);
134
+ ctx.arc(x + bl, y + h - bl, bl, PI_2, Math.PI);
135
+ ctx.closePath();
98
136
  }
137
+ /**
138
+ * Map Canvas globalCompositeOperation to Cairo.Operator values.
139
+ *
140
+ * Cairo.Operator enum (verified runtime in GJS 1.86):
141
+ * CLEAR=0, SOURCE=1, OVER=2, IN=3, OUT=4, ATOP=5,
142
+ * DEST=6, DEST_OVER=7, DEST_IN=8, DEST_OUT=9, DEST_ATOP=10,
143
+ * XOR=11, ADD=12, SATURATE=13,
144
+ * MULTIPLY=14, SCREEN=15, OVERLAY=16, DARKEN=17, LIGHTEN=18,
145
+ * COLOR_DODGE=19, COLOR_BURN=20, HARD_LIGHT=21, SOFT_LIGHT=22,
146
+ * DIFFERENCE=23, EXCLUSION=24, HSL_HUE=25, HSL_SATURATION=26,
147
+ * HSL_COLOR=27, HSL_LUMINOSITY=28
148
+ */
99
149
  const COMPOSITE_OP_MAP = {
100
- "source-over": 2,
101
- // OVER
102
- "source-in": 3,
103
- // IN
104
- "source-out": 4,
105
- // OUT
106
- "source-atop": 5,
107
- // ATOP
108
- "destination-over": 7,
109
- // DEST_OVER
110
- "destination-in": 8,
111
- // DEST_IN
112
- "destination-out": 9,
113
- // DEST_OUT
114
- "destination-atop": 10,
115
- // DEST_ATOP
116
- "lighter": 12,
117
- // ADD
118
- "copy": 1,
119
- // SOURCE
120
- "xor": 11,
121
- // XOR
122
- "multiply": 14,
123
- // MULTIPLY
124
- "screen": 15,
125
- // SCREEN
126
- "overlay": 16,
127
- // OVERLAY
128
- "darken": 17,
129
- // DARKEN
130
- "lighten": 18,
131
- // LIGHTEN
132
- "color-dodge": 19,
133
- // COLOR_DODGE
134
- "color-burn": 20,
135
- // COLOR_BURN
136
- "hard-light": 21,
137
- // HARD_LIGHT
138
- "soft-light": 22,
139
- // SOFT_LIGHT
140
- "difference": 23,
141
- // DIFFERENCE
142
- "exclusion": 24,
143
- // EXCLUSION
144
- "hue": 25,
145
- // HSL_HUE
146
- "saturation": 26,
147
- // HSL_SATURATION
148
- "color": 27,
149
- // HSL_COLOR
150
- "luminosity": 28
151
- // HSL_LUMINOSITY
150
+ "source-over": 2,
151
+ "source-in": 3,
152
+ "source-out": 4,
153
+ "source-atop": 5,
154
+ "destination-over": 7,
155
+ "destination-in": 8,
156
+ "destination-out": 9,
157
+ "destination-atop": 10,
158
+ "lighter": 12,
159
+ "copy": 1,
160
+ "xor": 11,
161
+ "multiply": 14,
162
+ "screen": 15,
163
+ "overlay": 16,
164
+ "darken": 17,
165
+ "lighten": 18,
166
+ "color-dodge": 19,
167
+ "color-burn": 20,
168
+ "hard-light": 21,
169
+ "soft-light": 22,
170
+ "difference": 23,
171
+ "exclusion": 24,
172
+ "hue": 25,
173
+ "saturation": 26,
174
+ "color": 27,
175
+ "luminosity": 28
152
176
  };
177
+ /** Map Canvas lineCap to Cairo.LineCap values */
153
178
  const LINE_CAP_MAP = {
154
- "butt": 0,
155
- "round": 1,
156
- "square": 2
179
+ "butt": 0,
180
+ "round": 1,
181
+ "square": 2
157
182
  };
183
+ /** Map Canvas lineJoin to Cairo.LineJoin values */
158
184
  const LINE_JOIN_MAP = {
159
- "miter": 0,
160
- "round": 1,
161
- "bevel": 2
162
- };
163
- export {
164
- COMPOSITE_OP_MAP,
165
- LINE_CAP_MAP,
166
- LINE_JOIN_MAP,
167
- cairoArcTo,
168
- cairoEllipse,
169
- cairoRoundRect,
170
- computeArcTo,
171
- quadraticToCubic
185
+ "miter": 0,
186
+ "round": 1,
187
+ "bevel": 2
172
188
  };
189
+
190
+ //#endregion
191
+ export { COMPOSITE_OP_MAP, LINE_CAP_MAP, LINE_JOIN_MAP, cairoArcTo, cairoEllipse, cairoRoundRect, computeArcTo, quadraticToCubic };
package/lib/esm/canvas-gradient.js CHANGED
@@ -1,23 +1,28 @@
1
- import Cairo from "cairo";
2
1
  import { parseColor } from "./color.js";
3
- class CanvasGradient {
4
- constructor(type, x0, y0, x1, y1, r0, r1) {
5
- if (type === "radial") {
6
- this._pattern = new Cairo.RadialGradient(x0, y0, r0, x1, y1, r1);
7
- } else {
8
- this._pattern = new Cairo.LinearGradient(x0, y0, x1, y1);
9
- }
10
- }
11
- addColorStop(offset, color) {
12
- const parsed = parseColor(color);
13
- if (!parsed) return;
14
- this._pattern.addColorStopRGBA(offset, parsed.r, parsed.g, parsed.b, parsed.a);
15
- }
16
- /** @internal Get the underlying Cairo pattern for rendering. */
17
- _getCairoPattern() {
18
- return this._pattern;
19
- }
20
- }
21
- export {
22
- CanvasGradient
2
+ import Cairo from "cairo";
3
+
4
+ //#region src/canvas-gradient.ts
5
+ /**
6
+ * CanvasGradient wrapping a Cairo LinearGradient or RadialGradient.
7
+ */
8
+ var CanvasGradient = class {
9
+ constructor(type, x0, y0, x1, y1, r0, r1) {
10
+ if (type === "radial") {
11
+ this._pattern = new Cairo.RadialGradient(x0, y0, r0, x1, y1, r1);
12
+ } else {
13
+ this._pattern = new Cairo.LinearGradient(x0, y0, x1, y1);
14
+ }
15
+ }
16
+ addColorStop(offset, color) {
17
+ const parsed = parseColor(color);
18
+ if (!parsed) return;
19
+ this._pattern.addColorStopRGBA(offset, parsed.r, parsed.g, parsed.b, parsed.a);
20
+ }
21
+ /** @internal Get the underlying Cairo pattern for rendering. */
22
+ _getCairoPattern() {
23
+ return this._pattern;
24
+ }
23
25
  };
26
+
27
+ //#endregion
28
+ export { CanvasGradient };
package/lib/esm/canvas-path.js CHANGED
@@ -1,104 +1,161 @@
1
- import { quadraticToCubic, cairoRoundRect } from "./cairo-utils.js";
2
- class Path2D {
3
- constructor(pathOrSvg) {
4
- /** @internal Recorded operations */
5
- this._ops = [];
6
- if (pathOrSvg instanceof Path2D) {
7
- this._ops = [...pathOrSvg._ops];
8
- }
9
- }
10
- addPath(path) {
11
- this._ops.push(...path._ops);
12
- }
13
- moveTo(x, y) {
14
- this._ops.push({ type: "moveTo", x, y });
15
- }
16
- lineTo(x, y) {
17
- this._ops.push({ type: "lineTo", x, y });
18
- }
19
- closePath() {
20
- this._ops.push({ type: "closePath" });
21
- }
22
- bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
23
- this._ops.push({ type: "bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y });
24
- }
25
- quadraticCurveTo(cpx, cpy, x, y) {
26
- this._ops.push({ type: "quadraticCurveTo", cpx, cpy, x, y });
27
- }
28
- arc(x, y, radius, startAngle, endAngle, counterclockwise = false) {
29
- this._ops.push({ type: "arc", x, y, radius, startAngle, endAngle, ccw: counterclockwise });
30
- }
31
- ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
32
- if (radiusX < 0 || radiusY < 0) throw new RangeError("The radii provided are negative");
33
- this._ops.push({ type: "ellipse", x, y, rx: radiusX, ry: radiusY, rotation, startAngle, endAngle, ccw: counterclockwise });
34
- }
35
- rect(x, y, w, h) {
36
- this._ops.push({ type: "rect", x, y, w, h });
37
- }
38
- roundRect(x, y, w, h, radii = 0) {
39
- this._ops.push({ type: "roundRect", x, y, w, h, radii });
40
- }
41
- /**
42
- * @internal Replay all recorded path operations onto a Cairo context.
43
- */
44
- _replayOnCairo(ctx) {
45
- let lastX = 0, lastY = 0;
46
- for (const op of this._ops) {
47
- switch (op.type) {
48
- case "moveTo":
49
- ctx.moveTo(op.x, op.y);
50
- lastX = op.x;
51
- lastY = op.y;
52
- break;
53
- case "lineTo":
54
- ctx.lineTo(op.x, op.y);
55
- lastX = op.x;
56
- lastY = op.y;
57
- break;
58
- case "closePath":
59
- ctx.closePath();
60
- break;
61
- case "bezierCurveTo":
62
- ctx.curveTo(op.cp1x, op.cp1y, op.cp2x, op.cp2y, op.x, op.y);
63
- lastX = op.x;
64
- lastY = op.y;
65
- break;
66
- case "quadraticCurveTo": {
67
- const { cp1x, cp1y, cp2x, cp2y } = quadraticToCubic(lastX, lastY, op.cpx, op.cpy, op.x, op.y);
68
- ctx.curveTo(cp1x, cp1y, cp2x, cp2y, op.x, op.y);
69
- lastX = op.x;
70
- lastY = op.y;
71
- break;
72
- }
73
- case "arc":
74
- if (op.ccw) {
75
- ctx.arcNegative(op.x, op.y, op.radius, op.startAngle, op.endAngle);
76
- } else {
77
- ctx.arc(op.x, op.y, op.radius, op.startAngle, op.endAngle);
78
- }
79
- break;
80
- case "ellipse":
81
- ctx.save();
82
- ctx.translate(op.x, op.y);
83
- ctx.rotate(op.rotation);
84
- ctx.scale(op.rx, op.ry);
85
- if (op.ccw) {
86
- ctx.arcNegative(0, 0, 1, op.startAngle, op.endAngle);
87
- } else {
88
- ctx.arc(0, 0, 1, op.startAngle, op.endAngle);
89
- }
90
- ctx.restore();
91
- break;
92
- case "rect":
93
- ctx.rectangle(op.x, op.y, op.w, op.h);
94
- break;
95
- case "roundRect":
96
- cairoRoundRect(ctx, op.x, op.y, op.w, op.h, op.radii);
97
- break;
98
- }
99
- }
100
- }
101
- }
102
- export {
103
- Path2D
1
+ import { cairoRoundRect, quadraticToCubic } from "./cairo-utils.js";
2
+
3
+ //#region src/canvas-path.ts
4
+ /**
5
+ * Path2D records path operations for later replay on a CanvasRenderingContext2D.
6
+ */
7
+ var Path2D = class Path2D {
8
+ constructor(pathOrSvg) {
9
+ this._ops = [];
10
+ if (pathOrSvg instanceof Path2D) {
11
+ this._ops = [...pathOrSvg._ops];
12
+ }
13
+ }
14
+ addPath(path) {
15
+ this._ops.push(...path._ops);
16
+ }
17
+ moveTo(x, y) {
18
+ this._ops.push({
19
+ type: "moveTo",
20
+ x,
21
+ y
22
+ });
23
+ }
24
+ lineTo(x, y) {
25
+ this._ops.push({
26
+ type: "lineTo",
27
+ x,
28
+ y
29
+ });
30
+ }
31
+ closePath() {
32
+ this._ops.push({ type: "closePath" });
33
+ }
34
+ bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
35
+ this._ops.push({
36
+ type: "bezierCurveTo",
37
+ cp1x,
38
+ cp1y,
39
+ cp2x,
40
+ cp2y,
41
+ x,
42
+ y
43
+ });
44
+ }
45
+ quadraticCurveTo(cpx, cpy, x, y) {
46
+ this._ops.push({
47
+ type: "quadraticCurveTo",
48
+ cpx,
49
+ cpy,
50
+ x,
51
+ y
52
+ });
53
+ }
54
+ arc(x, y, radius, startAngle, endAngle, counterclockwise = false) {
55
+ this._ops.push({
56
+ type: "arc",
57
+ x,
58
+ y,
59
+ radius,
60
+ startAngle,
61
+ endAngle,
62
+ ccw: counterclockwise
63
+ });
64
+ }
65
+ ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise = false) {
66
+ if (radiusX < 0 || radiusY < 0) throw new RangeError("The radii provided are negative");
67
+ this._ops.push({
68
+ type: "ellipse",
69
+ x,
70
+ y,
71
+ rx: radiusX,
72
+ ry: radiusY,
73
+ rotation,
74
+ startAngle,
75
+ endAngle,
76
+ ccw: counterclockwise
77
+ });
78
+ }
79
+ rect(x, y, w, h) {
80
+ this._ops.push({
81
+ type: "rect",
82
+ x,
83
+ y,
84
+ w,
85
+ h
86
+ });
87
+ }
88
+ roundRect(x, y, w, h, radii = 0) {
89
+ this._ops.push({
90
+ type: "roundRect",
91
+ x,
92
+ y,
93
+ w,
94
+ h,
95
+ radii
96
+ });
97
+ }
98
+ /**
99
+ * @internal Replay all recorded path operations onto a Cairo context.
100
+ */
101
+ _replayOnCairo(ctx) {
102
+ let lastX = 0, lastY = 0;
103
+ for (const op of this._ops) {
104
+ switch (op.type) {
105
+ case "moveTo":
106
+ ctx.moveTo(op.x, op.y);
107
+ lastX = op.x;
108
+ lastY = op.y;
109
+ break;
110
+ case "lineTo":
111
+ ctx.lineTo(op.x, op.y);
112
+ lastX = op.x;
113
+ lastY = op.y;
114
+ break;
115
+ case "closePath":
116
+ ctx.closePath();
117
+ break;
118
+ case "bezierCurveTo":
119
+ ctx.curveTo(op.cp1x, op.cp1y, op.cp2x, op.cp2y, op.x, op.y);
120
+ lastX = op.x;
121
+ lastY = op.y;
122
+ break;
123
+ case "quadraticCurveTo": {
124
+ const { cp1x, cp1y, cp2x, cp2y } = quadraticToCubic(lastX, lastY, op.cpx, op.cpy, op.x, op.y);
125
+ ctx.curveTo(cp1x, cp1y, cp2x, cp2y, op.x, op.y);
126
+ lastX = op.x;
127
+ lastY = op.y;
128
+ break;
129
+ }
130
+ case "arc":
131
+ if (op.ccw) {
132
+ ctx.arcNegative(op.x, op.y, op.radius, op.startAngle, op.endAngle);
133
+ } else {
134
+ ctx.arc(op.x, op.y, op.radius, op.startAngle, op.endAngle);
135
+ }
136
+ break;
137
+ case "ellipse":
138
+ ctx.save();
139
+ ctx.translate(op.x, op.y);
140
+ ctx.rotate(op.rotation);
141
+ ctx.scale(op.rx, op.ry);
142
+ if (op.ccw) {
143
+ ctx.arcNegative(0, 0, 1, op.startAngle, op.endAngle);
144
+ } else {
145
+ ctx.arc(0, 0, 1, op.startAngle, op.endAngle);
146
+ }
147
+ ctx.restore();
148
+ break;
149
+ case "rect":
150
+ ctx.rectangle(op.x, op.y, op.w, op.h);
151
+ break;
152
+ case "roundRect":
153
+ cairoRoundRect(ctx, op.x, op.y, op.w, op.h, op.radii);
154
+ break;
155
+ }
156
+ }
157
+ }
104
158
  };
159
+
160
+ //#endregion
161
+ export { Path2D };