CanvasRenderingContext2D.js 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _DOMMatrix = _interopRequireDefault(require("./DOMMatrix"));
  7. var _CanvasPattern = _interopRequireDefault(require("./CanvasPattern"));
  8. var _parseColor = _interopRequireDefault(require("parse-color"));
  9. var _cssfontparser = _interopRequireDefault(require("cssfontparser"));
  10. var _TextMetrics = _interopRequireDefault(require("./TextMetrics"));
  11. var _createCanvasEvent = _interopRequireDefault(require("../mock/createCanvasEvent"));
  12. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  13. function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
  14. function parseCSSColor(value) {
  15. const result = (0, _parseColor.default)(value);
  16. if (result.rgba && result.rgba[3] !== 1) {
  17. return 'rgba(' + result.rgba.join(', ') + ')';
  18. }
  19. if (result.hex) {
  20. const hex = result.hex; // shorthand #ABC
  21. if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
  22. return '#' + hex[1] + hex[3] + hex[5];
  23. }
  24. return result.hex;
  25. }
  26. return void 0;
  27. }
  28. const testFuncs = ['setLineDash', 'getLineDash', 'setTransform', 'getTransform', 'getImageData', 'save', 'restore', 'createPattern', 'createRadialGradient', 'addHitRegion', 'arc', 'arcTo', 'beginPath', 'clip', 'closePath', 'scale', 'stroke', 'clearHitRegions', 'clearRect', 'fillRect', 'strokeRect', 'rect', 'resetTransform', 'translate', 'moveTo', 'lineTo', 'bezierCurveTo', 'createLinearGradient', 'ellipse', 'measureText', 'rotate', 'drawImage', 'drawFocusIfNeeded', 'isPointInPath', 'isPointInStroke', 'putImageData', 'strokeText', 'fillText', 'quadraticCurveTo', 'removeHitRegion', 'fill', 'transform', 'scrollPathIntoView', 'createImageData'];
  29. const compositeOperations = ['source-over', 'source-in', 'source-out', 'source-atop', 'destination-over', 'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy', 'xor', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
  30. function getTransformSlice(ctx) {
  31. return ctx._transformStack[ctx._stackIndex].slice();
  32. }
  33. class CanvasRenderingContext2D {
  34. /**
  35. * Every time a function call would result in a drawing operation, it should be added to this array.
  36. * This goes for only draw call functions.
  37. */
  38. __getDrawCalls() {
  39. return this._drawCalls.slice();
  40. }
  41. /**
  42. * Clear the list of draw calls
  43. */
  44. __clearDrawCalls() {
  45. this._drawCalls = [];
  46. }
  47. /**
  48. * Every time a function call results in something that would have modified the state of the context,
  49. * an event is added to this array. This goes for every property set, and draw call.
  50. */
  51. __getEvents() {
  52. return this._events.slice();
  53. }
  54. /**
  55. * Clear the list of events
  56. */
  57. __clearEvents() {
  58. this._events = [];
  59. }
  60. /**
  61. * This array keeps track of the current path, so that fill and stroke operations can store the
  62. * path.
  63. */
  64. __getPath() {
  65. return this._path.slice();
  66. }
  67. /**
  68. * Clear the path and reset it to a single beginPath event.
  69. */
  70. __clearPath() {
  71. const event = (0, _createCanvasEvent.default)('beginPath', getTransformSlice(this), {});
  72. this._path = [event];
  73. }
  74. constructor(canvas) {
  75. _defineProperty(this, "_drawCalls", []);
  76. _defineProperty(this, "_events", []);
  77. _defineProperty(this, "_path", [(0, _createCanvasEvent.default)('beginPath', [1, 0, 0, 1, 0, 0], {})]);
  78. _defineProperty(this, "_directionStack", ['inherit']);
  79. _defineProperty(this, "_fillStyleStack", ['#000']);
  80. _defineProperty(this, "_filterStack", ['none']);
  81. _defineProperty(this, "_fontStack", ['10px sans-serif']);
  82. _defineProperty(this, "_globalAlphaStack", [1.0]);
  83. _defineProperty(this, "_globalCompositeOperationStack", ['source-over']);
  84. _defineProperty(this, "_imageSmoothingEnabledStack", [true]);
  85. _defineProperty(this, "_imageSmoothingQualityStack", ['low']);
  86. _defineProperty(this, "_lineCapStack", ['butt']);
  87. _defineProperty(this, "_lineDashOffsetStack", [0]);
  88. _defineProperty(this, "_lineDashStack", [[]]);
  89. _defineProperty(this, "_lineJoinStack", ['miter']);
  90. _defineProperty(this, "_lineWidthStack", [1]);
  91. _defineProperty(this, "_miterLimitStack", [10]);
  92. _defineProperty(this, "_shadowBlurStack", [0]);
  93. _defineProperty(this, "_shadowColorStack", ['rgba(0, 0, 0, 0)']);
  94. _defineProperty(this, "_shadowOffsetXStack", [0]);
  95. _defineProperty(this, "_shadowOffsetYStack", [0]);
  96. _defineProperty(this, "_stackIndex", 0);
  97. _defineProperty(this, "_strokeStyleStack", ['#000']);
  98. _defineProperty(this, "_textAlignStack", ['start']);
  99. _defineProperty(this, "_textBaselineStack", ['alphabetic']);
  100. _defineProperty(this, "_transformStack", [[1, 0, 0, 1, 0, 0]]);
  101. testFuncs.forEach(key => {
  102. this[key] = jest.fn(CanvasRenderingContext2D.prototype[key].bind(this));
  103. });
  104. this._canvas = canvas;
  105. }
  106. addHitRegion(options = {}) {
  107. const {
  108. path,
  109. fillRule,
  110. id,
  111. parentID,
  112. cursor,
  113. control,
  114. label,
  115. role
  116. } = options;
  117. if (!path && !id) throw new DOMException('ConstraintError', 'Failed to execute \'addHitRegion\' on \'' + this.constructor.name + '\': Both id and control are null.');
  118. if (fillRule && fillRule !== 'evenodd' && fillRule !== 'nonzero') throw new TypeError('Failed to execute \'addHitRegion\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  119. this._events.push((0, _createCanvasEvent.default)('addHitRegion', getTransformSlice(this), {
  120. path,
  121. fillRule,
  122. id,
  123. parentID,
  124. cursor,
  125. control,
  126. label,
  127. role
  128. }));
  129. }
  130. arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
  131. if (arguments.length < 5) throw new TypeError('Failed to execute \'arc\' on \'' + this.constructor.name + '\': 5 arguments required, but only ' + arguments.length + ' present.');
  132. const xResult = Number(x);
  133. const yResult = Number(y);
  134. const radiusResult = Number(radius);
  135. const startAngleResult = Number(startAngle);
  136. const endAngleResult = Number(endAngle);
  137. const anticlockwiseResult = Boolean(anticlockwise); // quick is finite check
  138. if (!Number.isFinite(xResult + yResult + radiusResult + startAngleResult + endAngleResult)) return;
  139. if (Number(radius) < 0) throw new DOMException('IndexSizeError', 'Failed to execute \'arc\' on \'' + this.constructor.name + '\': The radius provided (' + radius + ') is negative.');
  140. const event = (0, _createCanvasEvent.default)('arc', getTransformSlice(this), {
  141. x: xResult,
  142. y: yResult,
  143. radius: radiusResult,
  144. startAngle: startAngleResult,
  145. endAngle: endAngleResult,
  146. anticlockwise: anticlockwiseResult
  147. });
  148. this._path.push(event);
  149. this._events.push(event);
  150. }
  151. arcTo(cpx1, cpy1, cpx2, cpy2, radius) {
  152. if (arguments.length < 5) throw new DOMException('IndexSizeError', 'Failed to execute \'arcTo\' on \'' + this.constructor.name + '\': 5 arguments required, but only ' + arguments.length + ' present.');
  153. const cpx1Result = Number(cpx1);
  154. const cpy1Result = Number(cpy1);
  155. const cpx2Result = Number(cpx2);
  156. const cpy2Result = Number(cpy2);
  157. const radiusResult = Number(radius);
  158. if (!Number.isFinite(cpx1Result + cpx2Result + cpy1Result + cpy2Result + radiusResult)) return;
  159. if (radiusResult < 0) throw new TypeError('Failed to execute \'arcTo\' on \'' + this.constructor.name + '\': The radius provided (' + radius + ') is negative.');
  160. const event = (0, _createCanvasEvent.default)('arcTo', getTransformSlice(this), {
  161. cpx1: cpx1Result,
  162. cpy1: cpy1Result,
  163. cpx2: cpx2Result,
  164. cpy2: cpy2Result,
  165. radius: radiusResult
  166. });
  167. this._path.push(event);
  168. this._events.push(event);
  169. }
  170. beginPath() {
  171. this.__clearPath(); // push the generated beginPath to the event list
  172. this._events.push(this._path[0]);
  173. }
  174. bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) {
  175. if (arguments.length < 6) throw new TypeError('Failed to execute \'bezierCurveTo\' on \'' + this.constructor.name + '\': 6 arguments required, but only ' + arguments.length + ' present.');
  176. const cpx1Result = Number(cpx1);
  177. const cpy1Result = Number(cpy1);
  178. const cpx2Result = Number(cpx2);
  179. const cpy2Result = Number(cpy2);
  180. const xResult = Number(x);
  181. const yResult = Number(y);
  182. if (!Number.isFinite(cpx1Result + cpy1Result + cpx2Result + cpy2Result + xResult + yResult)) return;
  183. const event = (0, _createCanvasEvent.default)('bezierCurveTo', getTransformSlice(this), {
  184. cpx1,
  185. cpy1,
  186. cpx2,
  187. cpy2,
  188. x,
  189. y
  190. });
  191. this._path.push(event);
  192. this._events.push(event);
  193. }
  194. get canvas() {
  195. return this._canvas;
  196. }
  197. clearHitRegions() {
  198. const event = (0, _createCanvasEvent.default)('clearHitRegions', getTransformSlice(this), {});
  199. this._events.push(event);
  200. }
  201. clearRect(x, y, width, height) {
  202. if (arguments.length < 4) throw new TypeError('Failed to execute \'clearRect\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  203. const xResult = Number(x);
  204. const yResult = Number(y);
  205. const widthResult = Number(width);
  206. const heightResult = Number(height);
  207. if (!Number.isFinite(x + y + width + height)) return;
  208. const event = (0, _createCanvasEvent.default)('clearRect', getTransformSlice(this), {
  209. x: xResult,
  210. y: yResult,
  211. width: widthResult,
  212. height: heightResult
  213. });
  214. this._events.push(event);
  215. this._drawCalls.push(event);
  216. }
  217. clip(path, fillRule) {
  218. if (arguments.length === 0) {
  219. fillRule = 'nonzero';
  220. path = this._path.slice();
  221. } else {
  222. if (arguments.length === 1) fillRule = 'nonzero';
  223. if (path instanceof Path2D) {
  224. fillRule = String(fillRule);
  225. if (fillRule !== 'nonzero' && fillRule !== 'evenodd') throw new TypeError('Failed to execute \'clip\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  226. path = path._path.slice();
  227. } else {
  228. fillRule = String(path);
  229. if (fillRule !== 'nonzero' && fillRule !== 'evenodd') throw new TypeError('Failed to execute \'clip\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  230. path = this._path.slice();
  231. }
  232. }
  233. const event = (0, _createCanvasEvent.default)('clip', getTransformSlice(this), {
  234. path,
  235. fillRule
  236. });
  237. this._path.push(event);
  238. this._events.push(event);
  239. }
  240. closePath() {
  241. const event = (0, _createCanvasEvent.default)('closePath', getTransformSlice(this), {});
  242. this._events.push(event);
  243. this._path.push(event);
  244. }
  245. createImageData(width, height) {
  246. if (arguments.length < 1) throw new TypeError('Failed to execute \'createImageData\' on \'' + this.constructor.name + '\': 1 argument required, but only 0 present.');else if (arguments.length === 1) {
  247. if (!(width instanceof ImageData)) throw new TypeError('Failed to execute \'createImageData\' on \'' + this.constructor.name + '\': parameter 1 is not of type \'ImageData\'.');
  248. let result = new ImageData(width.width, width.height);
  249. result.data.set(width.data);
  250. const event = (0, _createCanvasEvent.default)('createImageData', getTransformSlice(this), {
  251. width: width.width,
  252. height: width.height
  253. });
  254. this._events.push(event);
  255. return result;
  256. } else {
  257. width = Math.abs(Number(width));
  258. height = Math.abs(Number(height));
  259. if (!Number.isFinite(width) || width === 0) throw new TypeError('Failed to execute \'createImageData\' on \'' + this.constructor.name + '\': The source width is 0.');
  260. if (!Number.isFinite(height) || height === 0) throw new TypeError('Failed to execute \'createImageData\' on \'' + this.constructor.name + '\': The source height is 0.');
  261. const event = (0, _createCanvasEvent.default)('createImageData', getTransformSlice(this), {
  262. width,
  263. height
  264. });
  265. this._events.push(event);
  266. return new ImageData(width, height);
  267. }
  268. }
  269. createLinearGradient(x0, y0, x1, y1) {
  270. if (arguments.length < 4) throw new TypeError('Failed to execute \'createLinearGradient\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  271. const x0Result = Number(x0);
  272. const y0Result = Number(y0);
  273. const x1Result = Number(x1);
  274. const y1Result = Number(y1);
  275. if (!Number.isFinite(x0Result + y0Result + x1Result + y1Result)) throw new TypeError('Failed to execute \'createLinearGradient\' on \'' + this.constructor.name + '\': The provided double value is non-finite.');
  276. const event = (0, _createCanvasEvent.default)('createLinearGradient', getTransformSlice(this), {
  277. x0: x0Result,
  278. y0: y0Result,
  279. x1: x1Result,
  280. y1: y1Result
  281. });
  282. this._events.push(event);
  283. return new CanvasGradient();
  284. }
  285. createPattern(image, type) {
  286. if (arguments.length === 1) throw new TypeError('Failed to execute \'createPattern\' on \'' + this.constructor.name + '\': 2 arguments required, but only 1 present.');
  287. if (type === null) type = 'repeat';
  288. if (type === '') type = 'repeat';
  289. if (type === 'repeat' || type === 'repeat-x' || type === 'repeat-y' || type === 'no-repeat') {
  290. const event = (0, _createCanvasEvent.default)('createPattern', getTransformSlice(this), {
  291. image,
  292. type
  293. });
  294. if (image instanceof ImageBitmap) {
  295. if (image._closed) throw new DOMException('InvalidStateError', 'Failed to execute \'createPattern\' on \'CanvasRenderingContext2D\': The image source is detached.');
  296. this._events.push(event);
  297. return new _CanvasPattern.default();
  298. }
  299. if (image instanceof HTMLImageElement) {
  300. this._events.push(event);
  301. return new _CanvasPattern.default();
  302. }
  303. if (image instanceof HTMLVideoElement) {
  304. this._events.push(event);
  305. return new _CanvasPattern.default();
  306. }
  307. if (image instanceof HTMLCanvasElement) {
  308. this._events.push(event);
  309. return new _CanvasPattern.default();
  310. }
  311. } else {
  312. throw new TypeError('Failed to execute \'createPattern\' on \'' + this.constructor.name + '\': The provided type (\'' + type + '\') is not one of \'repeat\', \'no-repeat\', \'repeat-x\', or \'repeat-y\'.');
  313. }
  314. throw new TypeError('Failed to execute \'createPattern\' on \'' + this.constructor.name + '\': The provided value is not of type \'(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)\'');
  315. }
  316. createRadialGradient(x0, y0, r0, x1, y1, r1) {
  317. if (arguments.length < 6) throw new TypeError('Failed to execute \'createRadialGradient\' on \'' + this.constructor.name + '\': 6 arguments required, but only ' + arguments.length + ' present.');
  318. const x0Result = Number(x0);
  319. const y0Result = Number(y0);
  320. const r0Result = Number(r0);
  321. const x1Result = Number(x1);
  322. const y1Result = Number(y1);
  323. const r1Result = Number(r1);
  324. if (!Number.isFinite(x0Result + y0Result + r0Result + x1Result + y1Result + r1Result)) throw new TypeError('Failed to execute \'createRadialGradient\' on \'' + this.constructor.name + '\': The provided double value is non-finite.');
  325. if (r0Result < 0) throw new DOMException('IndexSizeError', 'Failed to execute \'createRadialGradient\' on \'' + this.constructor.name + '\': The r0 provided is less than 0.');
  326. if (r1Result < 0) throw new DOMException('IndexSizeError', 'Failed to execute \'createRadialGradient\' on \'' + this.constructor.name + '\': The r1 provided is less than 0.');
  327. const event = (0, _createCanvasEvent.default)('createRadialGradient', getTransformSlice(this), {
  328. x0: x0Result,
  329. y0: y0Result,
  330. r0: r0Result,
  331. x1: x1Result,
  332. y1: y1Result,
  333. r1: r1Result
  334. });
  335. this._events.push(event);
  336. return new CanvasGradient();
  337. }
  338. set currentTransform(value) {
  339. if (value instanceof _DOMMatrix.default) {
  340. this._transformStack[this._stackIndex][0] = value.a;
  341. this._transformStack[this._stackIndex][1] = value.b;
  342. this._transformStack[this._stackIndex][2] = value.c;
  343. this._transformStack[this._stackIndex][3] = value.d;
  344. this._transformStack[this._stackIndex][4] = value.e;
  345. this._transformStack[this._stackIndex][5] = value.f;
  346. const event = (0, _createCanvasEvent.default)('currentTransform', getTransformSlice(this), {
  347. a: value.a,
  348. b: value.b,
  349. c: value.c,
  350. d: value.d,
  351. e: value.e,
  352. f: value.f
  353. });
  354. this._events.push(event);
  355. }
  356. }
  357. get currentTransform() {
  358. return new _DOMMatrix.default(this._transformStack[this._stackIndex]);
  359. }
  360. set direction(value) {
  361. if (value === 'rtl' || value === 'ltr' || value === 'inherit') {
  362. this._directionStack[this._stackIndex] = value;
  363. const event = (0, _createCanvasEvent.default)('direction', getTransformSlice(this), {
  364. value
  365. });
  366. this._events.push(event);
  367. }
  368. }
  369. get direction() {
  370. return this._directionStack[this._stackIndex];
  371. }
  372. drawFocusIfNeeded(path, element) {
  373. if (arguments.length === 0) throw new TypeError('Failed to execute \'drawFocusIfNeeded\' on \'' + this.constructor.name + '\': 1 argument required, but only 0 present.');
  374. if (arguments.length === 2 && !(path instanceof Path2D)) throw new TypeError('Failed to execute \'drawFocusIfNeeded\' on \'' + this.constructor.name + '\': parameter 1 is not of type \'Path2D\'.');
  375. if (arguments.length === 1) {
  376. element = path;
  377. path = null;
  378. }
  379. if (!(element instanceof Element)) throw new TypeError('Failed to execute \'drawFocusIfNeeded\' on \'' + this.constructor.name + '\': parameter ' + arguments.length + ' is not of type \'Element\'.');
  380. const event = (0, _createCanvasEvent.default)('drawFocusIfNeeded', getTransformSlice(this), {
  381. path: path ? path._path : null,
  382. element
  383. });
  384. this._events.push(event);
  385. }
  386. drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
  387. if (arguments.length < 3) throw new TypeError('Failed to execute \'drawImage\' on \'' + this.constructor.name + '\': 3 arguments required, but only ' + arguments.length + ' present.');
  388. if (arguments.length === 4 || arguments.length > 5 && arguments.length < 9) throw new TypeError('Failed to execute \'drawImage\' on \'' + this.constructor.name + '\': Valid arities are: [3, 5, 9], but 4 arguments provided.');
  389. let valid = false;
  390. if (img instanceof HTMLImageElement) valid = true;
  391. ;
  392. if (img instanceof ImageBitmap) {
  393. if (img._closed) throw new DOMException('InvalidStateError', 'DOMException: Failed to execute \'drawImage\' on \'CanvasRenderingContext2D\': The image source is detached.');
  394. valid = true;
  395. }
  396. if (img instanceof HTMLVideoElement) valid = true;
  397. if (img instanceof HTMLCanvasElement) valid = true;
  398. if (!valid) throw new TypeError('Failed to execute \'drawImage\' on \'' + this.constructor.name + '\': The provided value is not of type \'(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)\'');
  399. const sxResult = Number(sx);
  400. const syResult = Number(sy);
  401. const sWidthResult = Number(sWidth);
  402. const sHeightResult = Number(sHeight);
  403. const dxResult = Number(dx);
  404. const dyResult = Number(dy);
  405. const dWidthResult = Number(dWidth);
  406. const dHeightResult = Number(dHeight);
  407. if (arguments.length === 3) {
  408. if (!Number.isFinite(sxResult + syResult)) return;
  409. sx = 0;
  410. sy = 0;
  411. sWidth = img.width;
  412. sHeight = img.height;
  413. dx = sxResult;
  414. dy = syResult;
  415. dWidth = img.width;
  416. dHeight = img.height;
  417. } else if (arguments.length === 5) {
  418. if (!Number.isFinite(sxResult + syResult + sWidthResult + sHeightResult)) return;
  419. sx = 0;
  420. sy = 0;
  421. sWidth = img.width;
  422. sHeight = img.height;
  423. dx = sxResult;
  424. dy = syResult;
  425. dWidth = sWidth;
  426. dHeight = sHeight;
  427. } else {
  428. if (!Number.isFinite(sx + sy + sWidth + sHeight + dx + dy + dWidth + dHeight)) return;
  429. sx = sxResult;
  430. sy = syResult;
  431. sWidth = sWidthResult;
  432. sHeight = sHeightResult;
  433. dx = dxResult;
  434. dy = dyResult;
  435. dWidth = dWidthResult;
  436. dHeight = dHeightResult;
  437. }
  438. const event = (0, _createCanvasEvent.default)('drawImage', getTransformSlice(this), {
  439. img,
  440. sx,
  441. sy,
  442. sWidth,
  443. sHeight,
  444. dx,
  445. dy,
  446. dWidth,
  447. dHeight
  448. });
  449. this._events.push(event);
  450. this._drawCalls.push(event);
  451. }
  452. ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise = false) {
  453. if (arguments.length < 7) throw new TypeError('Failed to execute \'ellipse\' on \'' + this.constructor.name + '\': 6 arguments required, but only ' + arguments.length + ' present.');
  454. const xResult = Number(x);
  455. const yResult = Number(y);
  456. const radiusXResult = Number(radiusX);
  457. const radiusYResult = Number(radiusY);
  458. const rotationResult = Number(rotation);
  459. const startAngleResult = Number(startAngle);
  460. const endAngleResult = Number(endAngle);
  461. const anticlockwiseResult = Boolean(anticlockwise);
  462. if (!Number.isFinite(xResult + yResult + radiusXResult + radiusYResult + rotationResult + startAngleResult + endAngleResult)) return;
  463. if (Number(radiusX) < 0) throw new DOMException('IndexSizeError', 'Failed to execute \'ellipse\' on \'' + this.constructor.name + '\': The major-axis radius provided (' + radiusX + ') is negative.');
  464. if (Number(radiusY) < 0) throw new DOMException('IndexSizeError', 'Failed to execute \'ellipse\' on \'' + this.constructor.name + '\': The minor-axis radius provided (' + radiusY + ') is negative.');
  465. const event = (0, _createCanvasEvent.default)('ellipse', getTransformSlice(this), {
  466. x: xResult,
  467. y: yResult,
  468. radiusX: radiusXResult,
  469. radiusY: radiusYResult,
  470. rotation: rotationResult,
  471. startAngle: startAngleResult,
  472. endAngle: endAngleResult,
  473. anticlockwise: anticlockwiseResult
  474. });
  475. this._path.push(event);
  476. this._events.push(event);
  477. }
  478. fill(path, fillRule) {
  479. if (arguments.length === 0) {
  480. fillRule = 'nonzero';
  481. path = this._path.slice();
  482. } else {
  483. if (arguments.length === 1) fillRule = 'nonzero';
  484. if (path instanceof Path2D) {
  485. fillRule = String(fillRule);
  486. if (fillRule !== 'nonzero' && fillRule !== 'evenodd') throw new TypeError('Failed to execute \'clip\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  487. path = path._path.slice();
  488. } else {
  489. fillRule = String(path);
  490. if (fillRule !== 'nonzero' && fillRule !== 'evenodd') throw new TypeError('Failed to execute \'clip\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  491. path = this._path.slice();
  492. }
  493. }
  494. const event = (0, _createCanvasEvent.default)('fill', getTransformSlice(this), {
  495. path,
  496. fillRule
  497. });
  498. this._events.push(event);
  499. this._drawCalls.push(event);
  500. }
  501. fillRect(x, y, width, height) {
  502. if (arguments.length < 4) throw new TypeError('Failed to execute \'fillRect\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  503. const xResult = Number(x);
  504. const yResult = Number(y);
  505. const widthResult = Number(width);
  506. const heightResult = Number(height);
  507. if (!Number.isFinite(x + y + width + height)) return;
  508. const event = (0, _createCanvasEvent.default)('fillRect', getTransformSlice(this), {
  509. x: xResult,
  510. y: yResult,
  511. width: widthResult,
  512. height: heightResult
  513. });
  514. this._events.push(event);
  515. this._drawCalls.push(event);
  516. }
  517. set fillStyle(value) {
  518. let valid = false;
  519. if (typeof value === 'string') {
  520. const result = parseCSSColor(value);
  521. if (result) {
  522. valid = true;
  523. value = this._fillStyleStack[this._stackIndex] = result;
  524. }
  525. } else if (value instanceof CanvasGradient || value instanceof _CanvasPattern.default) {
  526. valid = true;
  527. this._fillStyleStack[this._stackIndex] = value;
  528. }
  529. if (valid) {
  530. const event = (0, _createCanvasEvent.default)('fillStyle', getTransformSlice(this), {
  531. value
  532. });
  533. this._events.push(event);
  534. }
  535. }
  536. get fillStyle() {
  537. return this._fillStyleStack[this._stackIndex];
  538. }
  539. fillText(text, x, y, maxWidth) {
  540. if (arguments.length < 3) throw new TypeError('Failed to execute \'fillText\' on \'' + this.constructor.name + '\': 3 arguments required, but only ' + arguments.length + ' present.');
  541. const textResult = String(text);
  542. const xResult = Number(x);
  543. const yResult = Number(y);
  544. const maxWidthResult = Number(maxWidth);
  545. if (arguments.length === 3 && !Number.isFinite(xResult + yResult)) return;
  546. if (arguments.length > 3 && !Number.isFinite(xResult + yResult + maxWidthResult)) return;
  547. const event = (0, _createCanvasEvent.default)('fillText', getTransformSlice(this), {
  548. text: textResult,
  549. x: xResult,
  550. y: yResult,
  551. maxWidth: arguments.length === 3 ? null : maxWidthResult
  552. });
  553. this._events.push(event);
  554. this._drawCalls.push(event);
  555. }
  556. set filter(value) {
  557. if (value === '') value = 'none';
  558. value = this._filterStack[this._stackIndex] = typeof value === 'string' ? value : 'none';
  559. const event = (0, _createCanvasEvent.default)('filter', getTransformSlice(this), {
  560. value
  561. });
  562. this._events.push(event);
  563. }
  564. get filter() {
  565. return this._filterStack[this._stackIndex];
  566. }
  567. set font(value) {
  568. let ex;
  569. try {
  570. const result = (0, _cssfontparser.default)(value);
  571. value = this._fontStack[this._stackIndex] = result.toString();
  572. const event = (0, _createCanvasEvent.default)('font', getTransformSlice(this), {
  573. value
  574. });
  575. this._events.push(event);
  576. } catch (ex) {}
  577. }
  578. get font() {
  579. return this._fontStack[this._stackIndex];
  580. }
  581. getImageData() {
  582. return new ImageData(this._canvas.width, this._canvas.height);
  583. }
  584. getLineDash() {
  585. return this._lineDashStack[this._stackIndex];
  586. }
  587. getTransform() {
  588. return new _DOMMatrix.default(this._transformStack[this._stackIndex]);
  589. }
  590. set globalAlpha(value) {
  591. value = Number(value);
  592. if (!Number.isFinite(value)) return;
  593. if (value < 0) return;
  594. if (value > 1) return;
  595. this._globalAlphaStack[this._stackIndex] = value;
  596. const event = (0, _createCanvasEvent.default)('globalAlpha', getTransformSlice(this), {
  597. value
  598. });
  599. this._events.push(event);
  600. }
  601. get globalAlpha() {
  602. return this._globalAlphaStack[this._stackIndex];
  603. }
  604. set globalCompositeOperation(value) {
  605. if (compositeOperations.indexOf(value) !== -1) {
  606. this._globalCompositeOperationStack[this._stackIndex] = value;
  607. const event = (0, _createCanvasEvent.default)('globalCompositeOperation', getTransformSlice(this), {
  608. value
  609. });
  610. this._events.push(event);
  611. }
  612. }
  613. get globalCompositeOperation() {
  614. return this._globalCompositeOperationStack[this._stackIndex];
  615. }
  616. set imageSmoothingEnabled(value) {
  617. value = this._imageSmoothingEnabledStack[this._stackIndex] = Boolean(value);
  618. const event = (0, _createCanvasEvent.default)('imageSmoothingEnabled', getTransformSlice(this), {
  619. value
  620. });
  621. this._events.push(event);
  622. }
  623. get imageSmoothingEnabled() {
  624. return this._imageSmoothingEnabledStack[this._stackIndex];
  625. }
  626. set imageSmoothingQuality(value) {
  627. if (value === 'high' || value === 'medium' || value === 'low') {
  628. this._imageSmoothingQualityStack[this._stackIndex] = value;
  629. const event = (0, _createCanvasEvent.default)('imageSmoothingQuality', getTransformSlice(this), {
  630. value
  631. });
  632. this._events.push(event);
  633. }
  634. }
  635. get imageSmoothingQuality() {
  636. return this._imageSmoothingQualityStack[this._stackIndex];
  637. }
  638. isPointInPath(path, x, y, fillRule = 'nonzero') {
  639. if (arguments.length < 2) throw new TypeError('Failed to execute \'isPointInPath\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  640. if (!(path instanceof Path2D)) {
  641. if (arguments.length > 2) {
  642. fillRule = y;
  643. }
  644. y = x;
  645. x = path;
  646. }
  647. if (fillRule !== 'nonzero' && fillRule !== 'evenodd') throw new TypeError('Failed to execute \'isPointInPath\' on \'' + this.constructor.name + '\': The provided value \'' + fillRule + '\' is not a valid enum value of type CanvasFillRule.');
  648. const event = (0, _createCanvasEvent.default)('isPointInPath', getTransformSlice(this), {
  649. x: Number(x),
  650. y: Number(y),
  651. fillRule,
  652. path: path instanceof Path2D ? path._path.slice() : this._path.slice()
  653. });
  654. this._events.push(event);
  655. return false; // return false in a mocking environment, unless I can verify a point is actually within the path
  656. }
  657. isPointInStroke(path, x, y) {
  658. if (arguments.length < 2) throw new TypeError('Failed to execute \'isPointInStroke\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  659. if (!(path instanceof Path2D)) {
  660. y = x;
  661. x = path;
  662. }
  663. const event = (0, _createCanvasEvent.default)('isPointInPath', getTransformSlice(this), {
  664. x: Number(x),
  665. y: Number(y),
  666. path: path instanceof Path2D ? path._path.slice() : this._path.slice()
  667. });
  668. this._events.push(event);
  669. return false; // return false in a mocking environment, unless I can verify a point is actually within the path
  670. }
  671. set lineCap(value) {
  672. if (value === 'butt' || value === 'round' || value === 'square') {
  673. this._lineCapStack[this._stackIndex] = value;
  674. const event = (0, _createCanvasEvent.default)('lineCap', getTransformSlice(this), {
  675. value
  676. });
  677. this._events.push(event);
  678. }
  679. }
  680. get lineCap() {
  681. return this._lineCapStack[this._stackIndex];
  682. }
  683. set lineDashOffset(value) {
  684. const result = Number(value);
  685. if (Number.isFinite(result)) {
  686. this._lineDashOffsetStack[this._stackIndex] = result;
  687. const event = (0, _createCanvasEvent.default)('lineDashOffset', getTransformSlice(this), {
  688. value
  689. });
  690. this._events.push(event);
  691. }
  692. }
  693. get lineDashOffset() {
  694. return this._lineDashOffsetStack[this._stackIndex];
  695. }
  696. set lineJoin(value) {
  697. if (value === 'round' || value === 'bevel' || value === 'miter') {
  698. this._lineJoinStack[this._stackIndex] = value;
  699. const event = (0, _createCanvasEvent.default)('lineJoin', getTransformSlice(this), {
  700. value
  701. });
  702. this._events.push(event);
  703. }
  704. }
  705. get lineJoin() {
  706. return this._lineJoinStack[this._stackIndex];
  707. }
  708. lineTo(x, y) {
  709. if (arguments.length < 2) throw new TypeError('Failed to execute \'lineTo\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  710. const xResult = Number(x);
  711. const yResult = Number(y);
  712. if (!Number.isFinite(xResult + yResult)) return;
  713. const event = (0, _createCanvasEvent.default)('lineTo', getTransformSlice(this), {
  714. x: xResult,
  715. y: yResult
  716. });
  717. this._events.push(event);
  718. this._path.push(event);
  719. }
  720. set lineWidth(value) {
  721. const result = Number(value);
  722. if (Number.isFinite(result) && result > 0) {
  723. this._lineWidthStack[this._stackIndex] = result;
  724. const event = (0, _createCanvasEvent.default)('lineWidth', getTransformSlice(this), {
  725. value: result
  726. });
  727. this._events.push(event);
  728. }
  729. }
  730. get lineWidth() {
  731. return this._lineWidthStack[this._stackIndex];
  732. }
  733. measureText(text) {
  734. if (arguments.length < 1) throw new TypeError('Failed to execute \'measureText\' on \'' + this.constructor.name + '\': 1 argument required, but only 0 present.');
  735. text = text == null ? '' : text;
  736. text = text.toString();
  737. const event = (0, _createCanvasEvent.default)('measureText', getTransformSlice(this), {
  738. text
  739. });
  740. this._events.push(event);
  741. return new _TextMetrics.default(text);
  742. }
  743. set miterLimit(value) {
  744. const result = Number(value);
  745. if (Number.isFinite(result) && result > 0) {
  746. this._miterLimitStack[this._stackIndex] = result;
  747. const event = (0, _createCanvasEvent.default)('lineWidth', getTransformSlice(this), {
  748. value: result
  749. });
  750. this._events.push(event);
  751. }
  752. }
  753. get miterLimit() {
  754. return this._miterLimitStack[this._stackIndex];
  755. }
  756. moveTo(x, y) {
  757. if (arguments.length < 2) throw new TypeError('Failed to execute \'moveTo\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  758. const xResult = Number(x);
  759. const yResult = Number(y);
  760. if (!Number.isFinite(x + y)) return;
  761. const event = (0, _createCanvasEvent.default)('moveTo', getTransformSlice(this), {
  762. x: xResult,
  763. y: yResult
  764. });
  765. this._events.push(event);
  766. this._path.push(event);
  767. }
  768. putImageData(data, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) {
  769. if (arguments.length < 3) throw new TypeError('Failed to execute \'putImageData\' on \'' + this.constructor.name + '\': 3 arguments required, but only ' + arguments.length + ' present.');
  770. if (arguments.length > 3 && arguments.length < 7) throw new TypeError('Failed to execute \'putImageData\' on \'' + this.constructor.name + '\': Valid arities are: [3, 7], but ' + arguments.length + ' arguments provided.');
  771. if (!(data instanceof ImageData)) throw new TypeError('Failed to execute \'putImageData\' on \'' + this.constructor.name + '\': parameter 1 is not of type \'ImageData\'.');
  772. const xResult = Number(x);
  773. const yResult = Number(y);
  774. const dirtyXResult = Number(dirtyX);
  775. const dirtyYResult = Number(dirtyY);
  776. const dirtyWidthResult = Number(dirtyWidth);
  777. const dirtyHeightResult = Number(dirtyHeight);
  778. if (arguments.length === 3) {
  779. if (!Number.isFinite(xResult + yResult)) return;
  780. } else {
  781. if (!Number.isFinite(xResult + yResult + dirtyXResult + dirtyYResult + dirtyWidthResult + dirtyHeightResult)) return;
  782. }
  783. const event = (0, _createCanvasEvent.default)('putImageData', getTransformSlice(this), {
  784. x: xResult,
  785. y: yResult,
  786. dirtyX: dirtyXResult,
  787. dirtyY: dirtyYResult,
  788. dirtyWidth: dirtyWidthResult,
  789. dirtyHeight: dirtyHeightResult
  790. });
  791. this._events.push(event);
  792. }
  793. quadraticCurveTo(cpx, cpy, x, y) {
  794. if (arguments.length < 4) throw new TypeError('Failed to execute \'quadraticCurveTo\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  795. const cpxResult = Number(cpx);
  796. const cpyResult = Number(cpy);
  797. const xResult = Number(x);
  798. const yResult = Number(y);
  799. if (!Number.isFinite(cpxResult + cpyResult + xResult + yResult)) return;
  800. const event = (0, _createCanvasEvent.default)('quadraticCurveTo', getTransformSlice(this), {
  801. cpx: cpxResult,
  802. cpy: cpyResult,
  803. x: xResult,
  804. y: yResult
  805. });
  806. this._events.push(event);
  807. }
  808. rect(x, y, width, height) {
  809. if (arguments.length < 4) throw new TypeError('Failed to execute \'rect\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  810. if (!Number.isFinite(x + y + width + height)) return;
  811. const xResult = Number(x);
  812. const yResult = Number(y);
  813. const widthResult = Number(width);
  814. const heightResult = Number(height);
  815. const event = (0, _createCanvasEvent.default)('rect', getTransformSlice(this), {
  816. x: xResult,
  817. y: yResult,
  818. width: widthResult,
  819. height: heightResult
  820. });
  821. this._events.push(event);
  822. this._path.push(event);
  823. }
  824. removeHitRegion(id) {
  825. if (arguments.length < 1) throw new TypeError('Failed to execute \'removeHitRegion\' on \'' + this.constructor.name + '\': 1 argument required, but only ' + arguments.length + ' present.');
  826. const event = (0, _createCanvasEvent.default)('removeHitRegion', getTransformSlice(this), {
  827. id
  828. });
  829. this._events.push(event);
  830. }
  831. resetTransform() {
  832. this._transformStack[this._stackIndex][0] = 1;
  833. this._transformStack[this._stackIndex][1] = 0;
  834. this._transformStack[this._stackIndex][2] = 0;
  835. this._transformStack[this._stackIndex][3] = 1;
  836. this._transformStack[this._stackIndex][4] = 0;
  837. this._transformStack[this._stackIndex][5] = 0;
  838. const event = (0, _createCanvasEvent.default)('resetTransform', getTransformSlice(this), {
  839. a: 1,
  840. b: 0,
  841. c: 0,
  842. d: 1,
  843. e: 0,
  844. f: 0
  845. });
  846. this._events.push(event);
  847. }
  848. restore() {
  849. if (this._stackIndex <= 0) return;
  850. this._transformStack.pop();
  851. this._directionStack.pop();
  852. this._fillStyleStack.pop();
  853. this._filterStack.pop();
  854. this._fontStack.pop();
  855. this._globalAlphaStack.pop();
  856. this._globalCompositeOperationStack.pop();
  857. this._imageSmoothingEnabledStack.pop();
  858. this._imageSmoothingQualityStack.pop();
  859. this._lineCapStack.pop();
  860. this._lineDashStack.pop();
  861. this._lineDashOffsetStack.pop();
  862. this._lineJoinStack.pop();
  863. this._lineWidthStack.pop();
  864. this._miterLimitStack.pop();
  865. this._shadowBlurStack.pop();
  866. this._shadowColorStack.pop();
  867. this._shadowOffsetXStack.pop();
  868. this._shadowOffsetYStack.pop();
  869. this._strokeStyleStack.pop();
  870. this._textAlignStack.pop();
  871. this._textBaselineStack.pop();
  872. this._stackIndex -= 1;
  873. const event = (0, _createCanvasEvent.default)('restore', getTransformSlice(this), {});
  874. this._events.push(event);
  875. }
  876. rotate(angle) {
  877. if (arguments.length < 1) throw new TypeError('Failed to execute \'rotate\' on \'' + this.constructor.name + '\': 1 argument required, but only 0 present.');
  878. angle = Number(angle);
  879. if (!Number.isFinite(angle)) return;
  880. const a = this._transformStack[this._stackIndex][0];
  881. const b = this._transformStack[this._stackIndex][1];
  882. const c = this._transformStack[this._stackIndex][2];
  883. const d = this._transformStack[this._stackIndex][3];
  884. const cos = Math.cos(angle);
  885. const sin = Math.sin(angle);
  886. this._transformStack[this._stackIndex][0] = a * cos + c * sin;
  887. this._transformStack[this._stackIndex][1] = b * cos + d * sin;
  888. this._transformStack[this._stackIndex][2] = c * cos - a * sin;
  889. this._transformStack[this._stackIndex][3] = d * cos - b * sin;
  890. const event = (0, _createCanvasEvent.default)('rotate', getTransformSlice(this), {
  891. angle
  892. });
  893. this._events.push(event);
  894. }
  895. save() {
  896. this._transformStack.push(this._transformStack[this._stackIndex].slice());
  897. this._directionStack.push(this._directionStack[this._stackIndex]);
  898. this._fillStyleStack.push(this._fillStyleStack[this._stackIndex]);
  899. this._filterStack.push(this._filterStack[this._stackIndex]);
  900. this._fontStack.push(this._fontStack[this._stackIndex]);
  901. this._globalAlphaStack.push(this._globalAlphaStack[this._stackIndex]);
  902. this._globalCompositeOperationStack.push(this._globalCompositeOperationStack[this._stackIndex]);
  903. this._imageSmoothingEnabledStack.push(this._imageSmoothingEnabledStack[this._stackIndex]);
  904. this._imageSmoothingQualityStack.push(this._imageSmoothingQualityStack[this._stackIndex]);
  905. this._lineCapStack.push(this._lineCapStack[this._stackIndex]);
  906. this._lineDashStack.push(this._lineDashStack[this._stackIndex]);
  907. this._lineDashOffsetStack.push(this._lineDashOffsetStack[this._stackIndex]);
  908. this._lineJoinStack.push(this._lineJoinStack[this._stackIndex]);
  909. this._lineWidthStack.push(this._lineWidthStack[this._stackIndex]);
  910. this._miterLimitStack.push(this._miterLimitStack[this._stackIndex]);
  911. this._shadowBlurStack.push(this._shadowBlurStack[this._stackIndex]);
  912. this._shadowColorStack.push(this._shadowColorStack[this._stackIndex]);
  913. this._shadowOffsetXStack.push(this._shadowOffsetXStack[this._stackIndex]);
  914. this._shadowOffsetYStack.push(this._shadowOffsetYStack[this._stackIndex]);
  915. this._strokeStyleStack.push(this._strokeStyleStack[this._stackIndex]);
  916. this._textAlignStack.push(this._textAlignStack[this._stackIndex]);
  917. this._textBaselineStack.push(this._textBaselineStack[this._stackIndex]);
  918. this._stackIndex += 1;
  919. const event = (0, _createCanvasEvent.default)('save', getTransformSlice(this), {});
  920. this._events.push(event);
  921. }
  922. scale(x, y) {
  923. if (arguments.length < 2) throw new TypeError('Failed to execute \'scale\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  924. const xResult = Number(x);
  925. const yResult = Number(y);
  926. if (Number.isFinite(xResult) && Number.isFinite(yResult)) {
  927. this._transformStack[this._stackIndex][0] *= xResult;
  928. this._transformStack[this._stackIndex][1] *= xResult;
  929. this._transformStack[this._stackIndex][2] *= yResult;
  930. this._transformStack[this._stackIndex][3] *= yResult;
  931. const event = (0, _createCanvasEvent.default)('scale', getTransformSlice(this), {
  932. x: xResult,
  933. y: yResult
  934. });
  935. this._events.push(event);
  936. }
  937. }
  938. scrollPathIntoView(path) {
  939. if (arguments.length > 0 && path instanceof Path2D) path = path._path.slice();else path = this._path.slice();
  940. const event = (0, _createCanvasEvent.default)('scrollPathIntoView', getTransformSlice(this), {
  941. path
  942. });
  943. this._events.push(event);
  944. }
  945. setLineDash(lineDash) {
  946. const isSequence = [Array, Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array].reduce((left, right) => left || lineDash instanceof right, false);
  947. if (!isSequence) throw new TypeError('Failed to execute \'setLineDash\' on \'' + this.constructor.name + '\': The provided value cannot be converted to a sequence.');
  948. let result = [];
  949. for (let i = 0; i < lineDash.length; i++) {
  950. const value = Number(lineDash[i]);
  951. if (Number.isFinite(value) && value >= 0) {
  952. result.push(value);
  953. } else {
  954. return;
  955. }
  956. }
  957. result = this._lineDashStack[this._stackIndex] = result.length % 2 === 1 ? result.concat(result) : result;
  958. const event = (0, _createCanvasEvent.default)('setLineDash', getTransformSlice(this), {
  959. value: result.slice()
  960. });
  961. this._events.push(event);
  962. }
  963. setTransform(a, b, c, d, e, f) {
  964. if (arguments.length === 0) {
  965. a = 1;
  966. b = 0;
  967. c = 0;
  968. d = 1;
  969. e = 0;
  970. f = 0;
  971. } else if (arguments.length === 1) {
  972. if (a instanceof _DOMMatrix.default) {
  973. let transform = a;
  974. a = transform.a;
  975. b = transform.b;
  976. c = transform.c;
  977. d = transform.d;
  978. e = transform.e;
  979. f = transform.f;
  980. } else {
  981. throw new TypeError('Failed to execute \'setTransform\' on \'' + this.constructor.name + '\': parameter ' + a + ' (\'transform\') is not an object.');
  982. }
  983. } else if (arguments.length < 6) {
  984. throw new TypeError('Failed to execute \'setTransform\' on \'' + this.constructor.name + '\': Valid arities are: [0, 1, 6], but ' + arguments.length + ' arguments provided.');
  985. }
  986. a = Number(a);
  987. b = Number(b);
  988. c = Number(c);
  989. d = Number(d);
  990. e = Number(e);
  991. f = Number(f);
  992. if (!Number.isFinite(a + b + c + d + e + f)) return;
  993. this._transformStack[this._stackIndex][0] = a;
  994. this._transformStack[this._stackIndex][1] = b;
  995. this._transformStack[this._stackIndex][2] = c;
  996. this._transformStack[this._stackIndex][3] = d;
  997. this._transformStack[this._stackIndex][4] = e;
  998. this._transformStack[this._stackIndex][5] = f;
  999. const event = (0, _createCanvasEvent.default)('setTransform', getTransformSlice(this), {
  1000. a,
  1001. b,
  1002. c,
  1003. d,
  1004. e,
  1005. f
  1006. });
  1007. this._events.push(event);
  1008. }
  1009. set shadowBlur(value) {
  1010. const result = Number(value);
  1011. if (Number.isFinite(result) && result > 0) {
  1012. this._shadowBlurStack[this._stackIndex] = result;
  1013. const event = (0, _createCanvasEvent.default)('shadowBlur', getTransformSlice(this), {
  1014. value: result
  1015. });
  1016. this._events.push(event);
  1017. }
  1018. }
  1019. get shadowBlur() {
  1020. return this._shadowBlurStack[this._stackIndex];
  1021. }
  1022. set shadowColor(value) {
  1023. if (typeof value === 'string') {
  1024. const result = parseCSSColor(value);
  1025. if (result) {
  1026. this._shadowColorStack[this._stackIndex] = result;
  1027. const event = (0, _createCanvasEvent.default)('shadowColor', getTransformSlice(this), {
  1028. value: result
  1029. });
  1030. this._events.push(event);
  1031. }
  1032. }
  1033. }
  1034. get shadowColor() {
  1035. return this._shadowColorStack[this._stackIndex];
  1036. }
  1037. set shadowOffsetX(value) {
  1038. const result = Number(value);
  1039. if (Number.isFinite(result)) {
  1040. this._shadowOffsetXStack[this._stackIndex] = result;
  1041. const event = (0, _createCanvasEvent.default)('shadowOffsetX', getTransformSlice(this), {
  1042. value: result
  1043. });
  1044. this._events.push(event);
  1045. }
  1046. }
  1047. get shadowOffsetX() {
  1048. return this._shadowOffsetXStack[this._stackIndex];
  1049. }
  1050. set shadowOffsetY(value) {
  1051. const result = Number(value);
  1052. if (Number.isFinite(result)) {
  1053. this._shadowOffsetXStack[this._stackIndex] = result;
  1054. const event = (0, _createCanvasEvent.default)('shadowOffsetY', getTransformSlice(this), {
  1055. value: result
  1056. });
  1057. this._events.push(event);
  1058. }
  1059. }
  1060. get shadowOffsetY() {
  1061. return this._shadowOffsetXStack[this._stackIndex];
  1062. }
  1063. stroke(path) {
  1064. if (arguments.length === 0) {
  1065. path = this._path.slice();
  1066. } else {
  1067. if (!(path instanceof Path2D)) throw new TypeError('Failed to execute \'stroke\' on \'' + this.constructor.name + '\': parameter 1 is not of type \'Path2D\'.');
  1068. path = path._path.slice();
  1069. }
  1070. const event = (0, _createCanvasEvent.default)('stroke', getTransformSlice(this), {
  1071. path
  1072. });
  1073. this._events.push(event);
  1074. this._drawCalls.push(event);
  1075. }
  1076. strokeRect(x, y, width, height) {
  1077. if (arguments.length < 4) throw new TypeError('Failed to execute \'strokeRect\' on \'' + this.constructor.name + '\': 4 arguments required, but only ' + arguments.length + ' present.');
  1078. x = Number(x);
  1079. y = Number(y);
  1080. width = Number(width);
  1081. height = Number(height);
  1082. if (!Number.isFinite(x + y + width + height)) return;
  1083. const event = (0, _createCanvasEvent.default)('strokeRect', getTransformSlice(this), {
  1084. x,
  1085. y,
  1086. width,
  1087. height
  1088. });
  1089. this._events.push(event);
  1090. this._drawCalls.push(event);
  1091. }
  1092. set strokeStyle(value) {
  1093. let valid = false;
  1094. if (typeof value === 'string') {
  1095. const result = parseCSSColor(value);
  1096. if (result) {
  1097. valid = true;
  1098. value = this._strokeStyleStack[this._stackIndex] = result;
  1099. }
  1100. } else if (value instanceof CanvasGradient || value instanceof _CanvasPattern.default) {
  1101. valid = true;
  1102. this._strokeStyleStack[this._stackIndex] = value;
  1103. }
  1104. if (valid) {
  1105. const event = (0, _createCanvasEvent.default)('strokeStyle', getTransformSlice(this), {
  1106. value
  1107. });
  1108. this._events.push(event);
  1109. }
  1110. }
  1111. get strokeStyle() {
  1112. return this._strokeStyleStack[this._stackIndex];
  1113. }
  1114. strokeText(text, x, y, maxWidth) {
  1115. if (arguments.length < 3) throw new TypeError('Failed to execute \'strokeText\' on \'' + this.constructor.name + '\': 3 arguments required, but only ' + arguments.length + ' present.');
  1116. const textResult = String(text);
  1117. const xResult = Number(x);
  1118. const yResult = Number(y);
  1119. const maxWidthResult = Number(maxWidth);
  1120. if (arguments.length === 3 && !Number.isFinite(xResult + yResult)) return;
  1121. if (arguments.length > 3 && !Number.isFinite(xResult + yResult + maxWidthResult)) return;
  1122. const event = (0, _createCanvasEvent.default)('strokeText', getTransformSlice(this), {
  1123. text: textResult,
  1124. x: xResult,
  1125. y: yResult,
  1126. maxWidth: arguments.length === 3 ? null : maxWidthResult
  1127. });
  1128. this._events.push(event);
  1129. this._drawCalls.push(event);
  1130. }
  1131. set textAlign(value) {
  1132. if (value === 'left' || value === 'right' || value === 'center' || value === 'start' || value === 'end') {
  1133. this._textAlignStack[this._stackIndex] = value;
  1134. const event = (0, _createCanvasEvent.default)('textAlign', getTransformSlice(this), {
  1135. value
  1136. });
  1137. this._events.push(event);
  1138. }
  1139. }
  1140. get textAlign() {
  1141. return this._textAlignStack[this._stackIndex];
  1142. }
  1143. set textBaseline(value) {
  1144. if (value === 'top' || value === 'hanging' || value === 'middle' || value === 'alphabetic' || value === 'ideographic' || value === 'bottom') {
  1145. this._textBaselineStack[this._stackIndex] = value;
  1146. const event = (0, _createCanvasEvent.default)('textBaseline', getTransformSlice(this), {
  1147. value
  1148. });
  1149. this._events.push(event);
  1150. }
  1151. }
  1152. get textBaseline() {
  1153. return this._textBaselineStack[this._stackIndex];
  1154. }
  1155. transform(a, b, c, d, e, f) {
  1156. if (arguments.length < 6) throw new TypeError('Failed to execute \'transform\' on \'' + this.constructor.name + '\': 6 arguments required, but only ' + arguments.length + ' present.');
  1157. a = Number(a);
  1158. b = Number(b);
  1159. c = Number(c);
  1160. d = Number(d);
  1161. e = Number(e);
  1162. f = Number(f);
  1163. if (!Number.isFinite(a + b + c + d + e + f)) return;
  1164. const sa = this._transformStack[this._stackIndex][0];
  1165. const sb = this._transformStack[this._stackIndex][1];
  1166. const sc = this._transformStack[this._stackIndex][2];
  1167. const sd = this._transformStack[this._stackIndex][3];
  1168. const se = this._transformStack[this._stackIndex][4];
  1169. const sf = this._transformStack[this._stackIndex][5];
  1170. this._transformStack[this._stackIndex][0] = sa * a + sc * b;
  1171. this._transformStack[this._stackIndex][1] = sb * a + sd * b;
  1172. this._transformStack[this._stackIndex][2] = sa * c + sc * d;
  1173. this._transformStack[this._stackIndex][3] = sb * c + sd * d;
  1174. this._transformStack[this._stackIndex][4] = sa * e + sc * f + se;
  1175. this._transformStack[this._stackIndex][5] = sb * e + sd * f + sf;
  1176. const event = (0, _createCanvasEvent.default)('transform', getTransformSlice(this), {
  1177. a,
  1178. b,
  1179. c,
  1180. d,
  1181. e,
  1182. f
  1183. });
  1184. this._events.push(event);
  1185. }
  1186. translate(x, y) {
  1187. if (arguments.length < 2) throw new TypeError('Failed to execute \'translate\' on \'' + this.constructor.name + '\': 2 arguments required, but only ' + arguments.length + ' present.');
  1188. const xResult = Number(x);
  1189. const yResult = Number(y);
  1190. const a = this._transformStack[this._stackIndex][0];
  1191. const b = this._transformStack[this._stackIndex][1];
  1192. const c = this._transformStack[this._stackIndex][2];
  1193. const d = this._transformStack[this._stackIndex][3];
  1194. if (Number.isFinite(xResult + yResult)) {
  1195. this._transformStack[this._stackIndex][4] += a * xResult + c * yResult;
  1196. this._transformStack[this._stackIndex][5] += b * xResult + d * yResult;
  1197. const event = (0, _createCanvasEvent.default)('translate', getTransformSlice(this), {
  1198. x: xResult,
  1199. y: yResult
  1200. });
  1201. this._events.push(event);
  1202. }
  1203. }
  1204. }
  1205. exports.default = CanvasRenderingContext2D;