modern-canvas 0.4.34 → 0.4.35

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.
package/dist/index.mjs CHANGED
@@ -1106,6 +1106,24 @@ class Color {
1106
1106
  constructor(value = 0) {
1107
1107
  this.value = value;
1108
1108
  }
1109
+ toHex() {
1110
+ return this._colord.toHex();
1111
+ }
1112
+ toRgb() {
1113
+ return this._colord.toRgb();
1114
+ }
1115
+ toRgbString() {
1116
+ return this._colord.toRgbString();
1117
+ }
1118
+ toHsl() {
1119
+ return this._colord.toHsl();
1120
+ }
1121
+ toHslString() {
1122
+ return this._colord.toHslString();
1123
+ }
1124
+ toHsv() {
1125
+ return this._colord.toHsv();
1126
+ }
1109
1127
  toArgb(alpha = this.a, applyToRGB = true) {
1110
1128
  if (alpha === 1) {
1111
1129
  return (255 << 24) + this.rgb;
@@ -1123,9 +1141,6 @@ class Color {
1123
1141
  }
1124
1142
  return (alpha * 255 << 24) + (r << 16) + (g << 8) + b;
1125
1143
  }
1126
- toHex() {
1127
- return this._colord.toHex();
1128
- }
1129
1144
  toArray() {
1130
1145
  return [this.r, this.g, this.b, this.a];
1131
1146
  }
@@ -1722,6 +1737,468 @@ class ColorMatrix extends Matrix {
1722
1737
  }
1723
1738
  }
1724
1739
 
1740
+ var GradientParser = GradientParser || {};
1741
+ GradientParser.parse = /* @__PURE__ */ function() {
1742
+ const tokens = {
1743
+ linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
1744
+ repeatingLinearGradient: /^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
1745
+ radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
1746
+ repeatingRadialGradient: /^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
1747
+ sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
1748
+ extentKeywords: /^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
1749
+ positionKeywords: /^(left|center|right|top|bottom)/i,
1750
+ pixelValue: /^(-?((\d*\.\d+)|(\d+\.?)))px/,
1751
+ percentageValue: /^(-?((\d*\.\d+)|(\d+\.?)))%/,
1752
+ emValue: /^(-?((\d*\.\d+)|(\d+\.?)))em/,
1753
+ angleValue: /^(-?((\d*\.\d+)|(\d+\.?)))deg/,
1754
+ radianValue: /^(-?((\d*\.\d+)|(\d+\.?)))rad/,
1755
+ startCall: /^\(/,
1756
+ endCall: /^\)/,
1757
+ comma: /^,/,
1758
+ hexColor: /^#([0-9a-f]+)/i,
1759
+ literalColor: /^([a-z]+)/i,
1760
+ rgbColor: /^rgb/i,
1761
+ rgbaColor: /^rgba/i,
1762
+ varColor: /^var/i,
1763
+ calcValue: /^calc/i,
1764
+ variableName: /^(--[a-z0-9-,\s#]+)/i,
1765
+ number: /^((\d*\.\d+)|(\d+\.?))/,
1766
+ hslColor: /^hsl/i,
1767
+ hslaColor: /^hsla/i
1768
+ };
1769
+ let input = "";
1770
+ function error(msg) {
1771
+ const err = new Error(`${input}: ${msg}`);
1772
+ err.source = input;
1773
+ throw err;
1774
+ }
1775
+ function getAST() {
1776
+ const ast = matchListDefinitions();
1777
+ if (input.length > 0) {
1778
+ error("Invalid input not EOF");
1779
+ }
1780
+ return ast;
1781
+ }
1782
+ function matchListDefinitions() {
1783
+ return matchListing(matchDefinition);
1784
+ }
1785
+ function matchDefinition() {
1786
+ return matchGradient(
1787
+ "linear-gradient",
1788
+ tokens.linearGradient,
1789
+ matchLinearOrientation
1790
+ ) || matchGradient(
1791
+ "repeating-linear-gradient",
1792
+ tokens.repeatingLinearGradient,
1793
+ matchLinearOrientation
1794
+ ) || matchGradient(
1795
+ "radial-gradient",
1796
+ tokens.radialGradient,
1797
+ matchListRadialOrientations
1798
+ ) || matchGradient(
1799
+ "repeating-radial-gradient",
1800
+ tokens.repeatingRadialGradient,
1801
+ matchListRadialOrientations
1802
+ );
1803
+ }
1804
+ function matchGradient(gradientType, pattern, orientationMatcher) {
1805
+ return matchCall(pattern, (captures) => {
1806
+ const orientation = orientationMatcher();
1807
+ if (orientation) {
1808
+ if (!scan(tokens.comma)) {
1809
+ error("Missing comma before color stops");
1810
+ }
1811
+ }
1812
+ return {
1813
+ type: gradientType,
1814
+ orientation,
1815
+ colorStops: matchListing(matchColorStop)
1816
+ };
1817
+ });
1818
+ }
1819
+ function matchCall(pattern, callback) {
1820
+ const captures = scan(pattern);
1821
+ if (captures) {
1822
+ if (!scan(tokens.startCall)) {
1823
+ error("Missing (");
1824
+ }
1825
+ const result = callback(captures);
1826
+ if (!scan(tokens.endCall)) {
1827
+ error("Missing )");
1828
+ }
1829
+ return result;
1830
+ }
1831
+ }
1832
+ function matchLinearOrientation() {
1833
+ const sideOrCorner = matchSideOrCorner();
1834
+ if (sideOrCorner) {
1835
+ return sideOrCorner;
1836
+ }
1837
+ const legacyDirection = match("position-keyword", tokens.positionKeywords, 1);
1838
+ if (legacyDirection) {
1839
+ return {
1840
+ type: "directional",
1841
+ value: legacyDirection.value
1842
+ };
1843
+ }
1844
+ return matchAngle();
1845
+ }
1846
+ function matchSideOrCorner() {
1847
+ return match("directional", tokens.sideOrCorner, 1);
1848
+ }
1849
+ function matchAngle() {
1850
+ return match("angular", tokens.angleValue, 1) || match("angular", tokens.radianValue, 1);
1851
+ }
1852
+ function matchListRadialOrientations() {
1853
+ let radialOrientations;
1854
+ let radialOrientation = matchRadialOrientation();
1855
+ let lookaheadCache;
1856
+ if (radialOrientation) {
1857
+ radialOrientations = [];
1858
+ radialOrientations.push(radialOrientation);
1859
+ lookaheadCache = input;
1860
+ if (scan(tokens.comma)) {
1861
+ radialOrientation = matchRadialOrientation();
1862
+ if (radialOrientation) {
1863
+ radialOrientations.push(radialOrientation);
1864
+ } else {
1865
+ input = lookaheadCache;
1866
+ }
1867
+ }
1868
+ }
1869
+ return radialOrientations;
1870
+ }
1871
+ function matchRadialOrientation() {
1872
+ let radialType = matchCircle() || matchEllipse();
1873
+ if (radialType) {
1874
+ radialType.at = matchAtPosition();
1875
+ } else {
1876
+ const extent = matchExtentKeyword();
1877
+ if (extent) {
1878
+ radialType = extent;
1879
+ const positionAt = matchAtPosition();
1880
+ if (positionAt) {
1881
+ radialType.at = positionAt;
1882
+ }
1883
+ } else {
1884
+ const atPosition = matchAtPosition();
1885
+ if (atPosition) {
1886
+ radialType = {
1887
+ type: "default-radial",
1888
+ at: atPosition
1889
+ };
1890
+ } else {
1891
+ const defaultPosition = matchPositioning();
1892
+ if (defaultPosition) {
1893
+ radialType = {
1894
+ type: "default-radial",
1895
+ at: defaultPosition
1896
+ };
1897
+ }
1898
+ }
1899
+ }
1900
+ }
1901
+ return radialType;
1902
+ }
1903
+ function matchCircle() {
1904
+ const circle = match("shape", /^(circle)/i, 0);
1905
+ if (circle) {
1906
+ circle.style = matchLength() || matchExtentKeyword();
1907
+ }
1908
+ return circle;
1909
+ }
1910
+ function matchEllipse() {
1911
+ const ellipse = match("shape", /^(ellipse)/i, 0);
1912
+ if (ellipse) {
1913
+ ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
1914
+ }
1915
+ return ellipse;
1916
+ }
1917
+ function matchExtentKeyword() {
1918
+ return match("extent-keyword", tokens.extentKeywords, 1);
1919
+ }
1920
+ function matchAtPosition() {
1921
+ if (match("position", /^at/, 0)) {
1922
+ const positioning = matchPositioning();
1923
+ if (!positioning) {
1924
+ error("Missing positioning value");
1925
+ }
1926
+ return positioning;
1927
+ }
1928
+ }
1929
+ function matchPositioning() {
1930
+ const location = matchCoordinates();
1931
+ if (location.x || location.y) {
1932
+ return {
1933
+ type: "position",
1934
+ value: location
1935
+ };
1936
+ }
1937
+ }
1938
+ function matchCoordinates() {
1939
+ return {
1940
+ x: matchDistance(),
1941
+ y: matchDistance()
1942
+ };
1943
+ }
1944
+ function matchListing(matcher) {
1945
+ let captures = matcher();
1946
+ const result = [];
1947
+ if (captures) {
1948
+ result.push(captures);
1949
+ while (scan(tokens.comma)) {
1950
+ captures = matcher();
1951
+ if (captures) {
1952
+ result.push(captures);
1953
+ } else {
1954
+ error("One extra comma");
1955
+ }
1956
+ }
1957
+ }
1958
+ return result;
1959
+ }
1960
+ function matchColorStop() {
1961
+ const color = matchColor();
1962
+ if (!color) {
1963
+ error("Expected color definition");
1964
+ }
1965
+ color.length = matchDistance();
1966
+ return color;
1967
+ }
1968
+ function matchColor() {
1969
+ return matchHexColor() || matchHSLAColor() || matchHSLColor() || matchRGBAColor() || matchRGBColor() || matchVarColor() || matchLiteralColor();
1970
+ }
1971
+ function matchLiteralColor() {
1972
+ return match("literal", tokens.literalColor, 0);
1973
+ }
1974
+ function matchHexColor() {
1975
+ return match("hex", tokens.hexColor, 1);
1976
+ }
1977
+ function matchRGBColor() {
1978
+ return matchCall(tokens.rgbColor, () => {
1979
+ return {
1980
+ type: "rgb",
1981
+ value: matchListing(matchNumber)
1982
+ };
1983
+ });
1984
+ }
1985
+ function matchRGBAColor() {
1986
+ return matchCall(tokens.rgbaColor, () => {
1987
+ return {
1988
+ type: "rgba",
1989
+ value: matchListing(matchNumber)
1990
+ };
1991
+ });
1992
+ }
1993
+ function matchVarColor() {
1994
+ return matchCall(tokens.varColor, () => {
1995
+ return {
1996
+ type: "var",
1997
+ value: matchVariableName()
1998
+ };
1999
+ });
2000
+ }
2001
+ function matchHSLColor() {
2002
+ return matchCall(tokens.hslColor, () => {
2003
+ const lookahead = scan(tokens.percentageValue);
2004
+ if (lookahead) {
2005
+ error("HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage");
2006
+ }
2007
+ const hue = matchNumber();
2008
+ scan(tokens.comma);
2009
+ let captures = scan(tokens.percentageValue);
2010
+ const sat = captures ? captures[1] : null;
2011
+ scan(tokens.comma);
2012
+ captures = scan(tokens.percentageValue);
2013
+ const light = captures ? captures[1] : null;
2014
+ if (!sat || !light) {
2015
+ error("Expected percentage value for saturation and lightness in HSL");
2016
+ }
2017
+ return {
2018
+ type: "hsl",
2019
+ value: [hue, sat, light]
2020
+ };
2021
+ });
2022
+ }
2023
+ function matchHSLAColor() {
2024
+ return matchCall(tokens.hslaColor, () => {
2025
+ const hue = matchNumber();
2026
+ scan(tokens.comma);
2027
+ let captures = scan(tokens.percentageValue);
2028
+ const sat = captures ? captures[1] : null;
2029
+ scan(tokens.comma);
2030
+ captures = scan(tokens.percentageValue);
2031
+ const light = captures ? captures[1] : null;
2032
+ scan(tokens.comma);
2033
+ const alpha = matchNumber();
2034
+ if (!sat || !light) {
2035
+ error("Expected percentage value for saturation and lightness in HSLA");
2036
+ }
2037
+ return {
2038
+ type: "hsla",
2039
+ value: [hue, sat, light, alpha]
2040
+ };
2041
+ });
2042
+ }
2043
+ function matchVariableName() {
2044
+ return scan(tokens.variableName)[1];
2045
+ }
2046
+ function matchNumber() {
2047
+ return scan(tokens.number)[1];
2048
+ }
2049
+ function matchDistance() {
2050
+ return match("%", tokens.percentageValue, 1) || matchPositionKeyword() || matchCalc() || matchLength();
2051
+ }
2052
+ function matchPositionKeyword() {
2053
+ return match("position-keyword", tokens.positionKeywords, 1);
2054
+ }
2055
+ function matchCalc() {
2056
+ return matchCall(tokens.calcValue, () => {
2057
+ let openParenCount = 1;
2058
+ let i = 0;
2059
+ while (openParenCount > 0 && i < input.length) {
2060
+ const char = input.charAt(i);
2061
+ if (char === "(") {
2062
+ openParenCount++;
2063
+ } else if (char === ")") {
2064
+ openParenCount--;
2065
+ }
2066
+ i++;
2067
+ }
2068
+ if (openParenCount > 0) {
2069
+ error("Missing closing parenthesis in calc() expression");
2070
+ }
2071
+ const calcContent = input.substring(0, i - 1);
2072
+ consume(i - 1);
2073
+ return {
2074
+ type: "calc",
2075
+ value: calcContent
2076
+ };
2077
+ });
2078
+ }
2079
+ function matchLength() {
2080
+ return match("px", tokens.pixelValue, 1) || match("em", tokens.emValue, 1);
2081
+ }
2082
+ function match(type, pattern, captureIndex) {
2083
+ const captures = scan(pattern);
2084
+ if (captures) {
2085
+ return {
2086
+ type,
2087
+ value: captures[captureIndex]
2088
+ };
2089
+ }
2090
+ }
2091
+ function scan(regexp) {
2092
+ let captures, blankCaptures;
2093
+ blankCaptures = /^\s+/.exec(input);
2094
+ if (blankCaptures) {
2095
+ consume(blankCaptures[0].length);
2096
+ }
2097
+ captures = regexp.exec(input);
2098
+ if (captures) {
2099
+ consume(captures[0].length);
2100
+ }
2101
+ return captures;
2102
+ }
2103
+ function consume(size) {
2104
+ input = input.substr(size);
2105
+ }
2106
+ return function(code) {
2107
+ input = code.toString().trim();
2108
+ if (input.endsWith(";")) {
2109
+ input = input.slice(0, -1);
2110
+ }
2111
+ return getAST();
2112
+ };
2113
+ }();
2114
+ const parseGradient = GradientParser.parse.bind(GradientParser);
2115
+
2116
+ class LinearGradient {
2117
+ constructor(x0, y0, x1, y1, stops) {
2118
+ this.x0 = x0;
2119
+ this.y0 = y0;
2120
+ this.x1 = x1;
2121
+ this.y1 = y1;
2122
+ this.stops = stops;
2123
+ }
2124
+ static from(css) {
2125
+ let angleDeg = 0;
2126
+ const stops = [];
2127
+ const ast = parseGradient(css)[0];
2128
+ if (ast.type === "linear-gradient") {
2129
+ switch (ast?.orientation?.type) {
2130
+ case "angular":
2131
+ angleDeg = Number(ast.orientation.value);
2132
+ break;
2133
+ }
2134
+ ast.colorStops.forEach((stop) => {
2135
+ let offset = 0;
2136
+ let color = "rgba(0, 0, 0, 0)";
2137
+ switch (stop.type) {
2138
+ case "rgb":
2139
+ color = `rgb(${stop.value[0]}, ${stop.value[1]}, ${stop.value[2]})`;
2140
+ break;
2141
+ case "rgba":
2142
+ color = `rgba(${stop.value[0]}, ${stop.value[1]}, ${stop.value[2]}, ${stop.value[3]})`;
2143
+ break;
2144
+ case "literal":
2145
+ color = stop.value;
2146
+ break;
2147
+ case "hex":
2148
+ color = stop.value;
2149
+ break;
2150
+ }
2151
+ switch (stop.length?.type) {
2152
+ case "%":
2153
+ offset = Number(stop.length.value) / 100;
2154
+ break;
2155
+ }
2156
+ stops.push({ offset, color });
2157
+ });
2158
+ }
2159
+ const angleRad = (angleDeg + 90) * Math.PI / 180;
2160
+ const width = 1;
2161
+ const height = 1;
2162
+ const halfWidth = width / 2;
2163
+ const halfHeight = height / 2;
2164
+ const length = Math.sqrt(width * width + height * height) / 2;
2165
+ const x0 = halfWidth + length * Math.cos(angleRad + Math.PI);
2166
+ const y0 = halfHeight + length * Math.sin(angleRad + Math.PI);
2167
+ const x1 = halfWidth + length * Math.cos(angleRad);
2168
+ const y1 = halfHeight + length * Math.sin(angleRad);
2169
+ return new LinearGradient(x0, y0, x1, y1, stops);
2170
+ }
2171
+ parse(width, height) {
2172
+ return this._parseByCanvas(width, height);
2173
+ }
2174
+ _parseByCanvas(width, height) {
2175
+ const canvas = document.createElement("canvas");
2176
+ canvas.width = width;
2177
+ canvas.height = height;
2178
+ const ctx = canvas.getContext("2d");
2179
+ if (!ctx) {
2180
+ throw new Error("Failed to parse linear gradient, get canvas context is null.");
2181
+ }
2182
+ const gradient = ctx.createLinearGradient(
2183
+ this.x0 * width,
2184
+ this.y0 * height,
2185
+ this.x1 * width,
2186
+ this.y1 * height
2187
+ );
2188
+ this.stops.forEach((stop) => {
2189
+ gradient.addColorStop(stop.offset, stop.color);
2190
+ });
2191
+ ctx.fillStyle = gradient;
2192
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
2193
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
2194
+ return {
2195
+ width: imageData.width,
2196
+ height: imageData.height,
2197
+ pixels: new Uint8Array(imageData.data.buffer)
2198
+ };
2199
+ }
2200
+ }
2201
+
1725
2202
  class Matrix2 extends Matrix {
1726
2203
  constructor(array) {
1727
2204
  super(2, 2, array);
@@ -1826,6 +2303,47 @@ class Projection2D extends Matrix3 {
1826
2303
  }
1827
2304
  }
1828
2305
 
2306
+ class RadialGradient {
2307
+ constructor(x0, y0, r0, x1, y1, r1, stops) {
2308
+ this.x0 = x0;
2309
+ this.y0 = y0;
2310
+ this.r0 = r0;
2311
+ this.x1 = x1;
2312
+ this.y1 = y1;
2313
+ this.r1 = r1;
2314
+ this.stops = stops;
2315
+ }
2316
+ parse(width, height) {
2317
+ return this._parseByCanvas(width, height);
2318
+ }
2319
+ _parseByCanvas(width, height) {
2320
+ const canvas = document.createElement("canvas");
2321
+ const ctx = canvas.getContext("2d");
2322
+ if (!ctx) {
2323
+ throw new Error("Failed to parse radial gradient, get canvas context is null.");
2324
+ }
2325
+ const gradient = ctx.createRadialGradient(
2326
+ this.x0 * width,
2327
+ this.y0 * height,
2328
+ this.r0,
2329
+ this.x1 * width,
2330
+ this.y1 * height,
2331
+ this.r1
2332
+ );
2333
+ this.stops.forEach((stop) => {
2334
+ gradient.addColorStop(stop.offset, stop.color);
2335
+ });
2336
+ ctx.fillStyle = gradient;
2337
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
2338
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
2339
+ return {
2340
+ width: imageData.width,
2341
+ height: imageData.height,
2342
+ pixels: new Uint8Array(imageData.data.buffer)
2343
+ };
2344
+ }
2345
+ }
2346
+
1829
2347
  class Vector2 extends Vector {
1830
2348
  get x() {
1831
2349
  return this._array[0];
@@ -5130,6 +5648,19 @@ class ColorTexture extends Texture2D {
5130
5648
  }
5131
5649
  }
5132
5650
 
5651
+ class GradientTexture extends Texture2D {
5652
+ // |(radial-gradient)
5653
+ static regExp = /(linear-gradient)/;
5654
+ static test(value) {
5655
+ return this.regExp.test(value);
5656
+ }
5657
+ constructor(value, width, height) {
5658
+ super(
5659
+ LinearGradient.from(value).parse(width, height)
5660
+ );
5661
+ }
5662
+ }
5663
+
5133
5664
  function resolveOptions$1(options) {
5134
5665
  return {
5135
5666
  autoLoad: Boolean(options?.autoLoad ?? true),
@@ -5572,6 +6103,21 @@ let Node = class extends CoreObject {
5572
6103
  }).append(nodes);
5573
6104
  this.on("treeEnter", this._onTreeEnter).on("treeExit", this._onTreeExit).on("parented", this._onParented).on("unparented", this._onUnparented).on("ready", this._onReady).on("process", this._onProcess);
5574
6105
  }
6106
+ setProperties(properties) {
6107
+ if (properties) {
6108
+ const {
6109
+ meta,
6110
+ ...restProperties
6111
+ } = properties;
6112
+ if (meta) {
6113
+ for (const key in meta) {
6114
+ this.setMeta(key, meta[key]);
6115
+ }
6116
+ }
6117
+ super.setProperties(restProperties);
6118
+ }
6119
+ return this;
6120
+ }
5575
6121
  /** Name */
5576
6122
  getName() {
5577
6123
  return this.name;
@@ -7066,20 +7612,27 @@ class CanvasContext extends Path2D {
7066
7612
  miterLimit;
7067
7613
  _defaultStyle = Texture2D.EMPTY;
7068
7614
  _draws = [];
7615
+ _colorToTexture(color, width, height) {
7616
+ if (color instanceof Texture2D) {
7617
+ return color;
7618
+ } else if (typeof color === "string" && GradientTexture.test(color)) {
7619
+ return new GradientTexture(color, width, height);
7620
+ } else {
7621
+ return new ColorTexture(color);
7622
+ }
7623
+ }
7069
7624
  stroke(options) {
7625
+ const path = new Path2D(this);
7070
7626
  let texture = this._defaultStyle;
7071
7627
  if (this.strokeStyle) {
7072
- if (this.strokeStyle instanceof Texture2D) {
7073
- texture = this.strokeStyle;
7074
- } else {
7075
- texture = new ColorTexture(this.strokeStyle);
7076
- }
7628
+ const { width, height } = path.getBoundingBox();
7629
+ texture = this._colorToTexture(this.strokeStyle, width, height);
7077
7630
  }
7078
7631
  if (this.curves.length) {
7079
7632
  this._draws.push({
7080
7633
  ...options,
7081
7634
  type: "stroke",
7082
- path: new Path2D(this),
7635
+ path,
7083
7636
  texture,
7084
7637
  textureTransform: this.textureTransform,
7085
7638
  style: {
@@ -7100,18 +7653,16 @@ class CanvasContext extends Path2D {
7100
7653
  this.rect(x, y, width, height).stroke();
7101
7654
  }
7102
7655
  fill(options) {
7656
+ const path = new Path2D(this);
7103
7657
  let texture = this._defaultStyle;
7104
7658
  if (this.fillStyle) {
7105
- if (this.fillStyle instanceof Texture2D) {
7106
- texture = this.fillStyle;
7107
- } else {
7108
- texture = new ColorTexture(this.fillStyle);
7109
- }
7659
+ const { width, height } = path.getBoundingBox();
7660
+ texture = this._colorToTexture(this.fillStyle, width, height);
7110
7661
  }
7111
7662
  this._draws.push({
7112
7663
  ...options,
7113
7664
  type: "fill",
7114
- path: new Path2D(this),
7665
+ path,
7115
7666
  texture,
7116
7667
  textureTransform: this.textureTransform
7117
7668
  });
@@ -14019,4 +14570,4 @@ async function render(options) {
14019
14570
  });
14020
14571
  }
14021
14572
 
14022
- export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DGeometry, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
14573
+ export { AnimatedTexture, Animation, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, BaseElement2D, BaseElement2DBackground, BaseElement2DFill, BaseElement2DForeground, BaseElement2DGeometry, BaseElement2DOutline, BaseElement2DShadow, BaseElement2DStyle, BaseElement2DText, CanvasContext, CanvasItem, CanvasItemEditor, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, Control, CoreObject, DEG_TO_RAD, DEVICE_PIXEL_RATIO, DropShadowEffect, Effect, EffectMaterial, Element2D, Element2DStyle, EmbossEffect, Engine, EventEmitter, FlexElement2D, FlexElement2DStyle, FlexLayout, FontLoader, GIFLoader, GaussianBlurEffect, Geometry, GlitchEffect, GodrayEffect, GradientTexture, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, IN_BROWSER, Image2D, ImageTexture, IndexBuffer, Input, InputEvent, JSONLoader, KawaseBlurEffect, KawaseTransition, LeftEraseTransition, LinearGradient, Loader, Lottie2D, LottieLoader, MainLoop, MaskEffect, Material, Matrix, Matrix2, Matrix3, Matrix4, MouseInputEvent, Node, Node2D, OutlineEffect, PI, PI_2, PixelateEffect, PixelsTexture, PointerInputEvent, Projection2D, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, RadialGradient, Range, RawWeakMap, Rect2, RefCounted, Renderer, Resource, Ruler, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, SceneTree, ScrollBar, Text2D, TextLoader, Texture2D, TextureLoader, TextureRect2D, Ticker, TiltShiftTransition, Timeline, TimelineNode, Transform2D, TransformRect2D, Transition, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, VertexAttribute, VertexBuffer, Video2D, VideoLoader, VideoTexture, Viewport, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, WebGLBufferModule, WebGLFramebufferModule, WebGLMaskModule, WebGLModule, WebGLProgramModule, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, WebGLTextureModule, WebGLVertexArrayModule, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, YScrollBar, ZoomBlurEffect, assets, clamp, clampFrag, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, frag$1 as frag, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "modern-canvas",
3
3
  "type": "module",
4
- "version": "0.4.34",
4
+ "version": "0.4.35",
5
5
  "packageManager": "pnpm@9.15.1",
6
6
  "description": "A JavaScript WebGL rendering engine.",
7
7
  "author": "wxm",
@@ -70,7 +70,7 @@
70
70
  "colord": "^2.9.3",
71
71
  "earcut": "^3.0.1",
72
72
  "modern-font": "^0.4.1",
73
- "modern-idoc": "^0.5.3",
73
+ "modern-idoc": "^0.5.4",
74
74
  "modern-path2d": "^1.2.19",
75
75
  "modern-text": "^1.3.10",
76
76
  "yoga-layout": "^3.2.1"