[
  {
    "path": ".brackets.json",
    "content": "{\n    \"spaceUnits\": 2,\n    \"useTabChar\": false,\n    \"language\": {\n        \"javascript\": {\n            \"linting.prefer\": [\n                \"ESLint\"\n            ],\n            \"linting.usePreferredOnly\": true\n        },\n        \"markdown\": {\n            \"wordWrap\": true\n        }\n    },\n    \"language.fileNames\": {\n        \"Jenkinsfile\": \"groovy\"\n    },\n    \"language.fileExtensions\": {\n      \"mjs\": \"javascript\"\n    }\n}\n"
  },
  {
    "path": ".editorconfig",
    "content": "root = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset = utf-8\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[{package.json,*.yml}]\nindent_size = 2\n"
  },
  {
    "path": ".eslintrc.yml",
    "content": "extends:\n  - eslint:recommended\nenv:\n  es6: false\n  browser: true\n  node: true\nrules:\n  semi: [ error, always ]\n"
  },
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n\n*.js     text eol=lf\n*.jsx    text eol=lf\n*.json   text eol=lf\n*.html   text eol=lf\n*.md     text eol=lf\n*.yml    text eol=lf\n*.css    text eol=lf\n*.less   text eol=lf\n*.scss   text eol=lf\n*.sass   text eol=lf\n*.svg    text eol=lf\n*.xml    text eol=lf\n*.sh     text eol=lf\n\n# Custom for Visual Studio\n*.cs     diff=csharp\n\n# Standard to msysgit\n*.doc    diff=astextplain\n*.DOC    diff=astextplain\n*.docx   diff=astextplain\n*.DOCX   diff=astextplain\n*.dot    diff=astextplain\n*.DOT    diff=astextplain\n*.pdf    diff=astextplain\n*.PDF    diff=astextplain\n*.rtf    diff=astextplain\n*.RTF    diff=astextplain\n"
  },
  {
    "path": ".github/funding.yml",
    "content": "github: catdad\ncustom: [\"https://www.paypal.me/kirilvatev\", \"https://venmo.com/Kiril-Vatev\"]\n"
  },
  {
    "path": ".github/workflows/ci.yml",
    "content": "name: CI\n\non:\n  push:\n  pull_request:\n    branches: [master]\n\npermissions:\n  id-token: write\n  contents: read\n\nenv:\n  FORCE_COLOR: 1\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v5\n      - uses: actions/setup-node@v6\n        with:\n          node-version: 24\n          registry-url: https://registry.npmjs.org/\n      - run: npm install\n      - run: npm run lint\n      - run: npm test\n      - run: npm pack --dry-run\n      - run: npm publish\n        if: startsWith(github.ref, 'refs/tags/') && github.event_name != 'pull_request'\n      - uses: actions/upload-artifact@v4\n        if: ${{ failure() }}\n        with:\n          name: test-screenshots\n          path: shots/\n"
  },
  {
    "path": ".gitignore",
    "content": "# Windows image file caches\nThumbs.db\nehthumbs.db\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows shortcuts\n*.lnk\n\n# OSX\n.DS_Store\n.AppleDouble\n.LSOverride\n\n# Thumbnails\n._*\n\n# Files that might appear in the root of a volume\n.DocumentRevisions-V100\n.fseventsd\n.Spotlight-V100\n.TemporaryItems\n.Trashes\n.VolumeIcon.icns\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n# Node stuff\nnode_modules/\ncoverage/\n.nyc_output/\n\n# project-specific stuff\nshots/\ndist/\ntemp/\n"
  },
  {
    "path": ".npmignore",
    "content": "# Windows image file caches\nThumbs.db\nehthumbs.db\nDesktop.ini\n\n# Recycle Bin used on file shares\n$RECYCLE.BIN/\n\n# Windows shortcuts\n*.lnk\n\n# OSX\n.DS_Store\n.AppleDouble\n.LSOverride\n\n# Thumbnails\n._*\n\n# Files that might appear in the root of a volume\n.DocumentRevisions-V100\n.fseventsd\n.Spotlight-V100\n.TemporaryItems\n.Trashes\n.VolumeIcon.icns\n\n# Directories potentially created on remote AFP share\n.AppleDB\n.AppleDesktop\nNetwork Trash Folder\nTemporary Items\n.apdisk\n\n# Node stuff\nnode_modules/\ncoverage/\n.nyc_output/\n\n# project-specific stuff\nbin/\ntest/\nshots/\ntemp/\nbuild/\nfixtures/\nindex.html\n\n# dotfiles don't need to be in npm\n.*\n"
  },
  {
    "path": ".npmrc",
    "content": "package-lock=false\n"
  },
  {
    "path": "LICENSE",
    "content": "ISC License\n\nCopyright (c) 2020, Kiril Vatev\n\nPermission to use, copy, modify, and/or distribute this software for any\npurpose with or without fee is hereby granted, provided that the above\ncopyright notice and this permission notice appear in all copies.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES\nWITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF\nMERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR\nANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES\nWHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN\nACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF\nOR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# [![Canvas Confetti](https://cdn.jsdelivr.net/gh/catdad-experiments/catdad-experiments-org@5ed78b/canvas-confetti/logo.jpg)](https://github.com/catdad/canvas-confetti/)\n\n[![github actions ci][ci.svg]][ci.link]\n[![jsdelivr][jsdelivr.svg]][jsdelivr.link]\n[![npm-downloads][npm-downloads.svg]][npm.link]\n[![npm-version][npm-version.svg]][npm.link]\n\n[ci.svg]: https://github.com/catdad/canvas-confetti/actions/workflows/ci.yml/badge.svg\n[ci.link]: https://github.com/catdad/canvas-confetti/actions/workflows/ci.yml?query=branch%3Amaster\n[jsdelivr.svg]: https://data.jsdelivr.com/v1/package/npm/canvas-confetti/badge?style=rounded\n[jsdelivr.link]: https://www.jsdelivr.com/package/npm/canvas-confetti\n[npm-downloads.svg]: https://img.shields.io/npm/dm/canvas-confetti.svg\n[npm.link]: https://www.npmjs.com/package/canvas-confetti\n[npm-version.svg]: https://img.shields.io/npm/v/canvas-confetti.svg\n\n## Demo\n\n[catdad.github.io/canvas-confetti](https://catdad.github.io/canvas-confetti/)\n\n## Install\n\nYou can install this module as a component from NPM:\n\n```bash\nnpm install --save canvas-confetti\n```\n\nYou can then `require('canvas-confetti');` to use it in your project build. _Note: this is a client component, and will not run in Node. You will need to build your project with something like [webpack](https://github.com/webpack/webpack) in order to use this._\n\nYou can also include this library in your HTML page directly from a CDN:\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js\"></script>\n```\n\n_Note: you should use the latest version at the time that you include your project. You can see all versions [on the releases page](https://github.com/catdad/canvas-confetti/releases)._\n\n## Reduced Motion\n\nThank you for joining me in this very important message about motion on your website. See, [not everyone likes it, and some actually prefer no motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). They have [ways to tell us about it](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) and we should listen. While I don't want to go as far as tell you not to have confetti on your page just yet, I do want to make it easy for you to respect what your users want. There is a `disableForReducedMotion` option you can use so that users that have trouble with chaotic animations don't need to struggle on your website. This is disabled by default, but I am considering changing that in a future major release. If you have strong feelings about this, [please let me know](https://github.com/catdad/canvas-confetti/issues/new). For now, please confetti responsibly.\n\n## API\n\nWhen installed from `npm`, this library can be required as a client component in your project build. When using the CDN version, it is exposed as a `confetti` function on `window`.\n\n### `confetti([options {Object}])` → `Promise|null`\n\n`confetti` takes a single optional object. When `window.Promise` is available, it will return a Promise to let you know when it is done. When promises are not available (like in IE), it will return `null`. You can polyfill promises using any of the popular polyfills. You can also provide a promise implementation to `confetti` through:\n\n```javascript\nconst MyPromise = require('some-promise-lib');\nconst confetti = require('canvas-confetti');\nconfetti.Promise = MyPromise;\n```\n\nIf you call `confetti` multiple times before it is done, it will return the same promise every time. Internally, the same canvas element will be reused, continuing the existing animation with the new confetti added. The promise returned by each call to `confetti` will resolve once all animations are done.\n\n#### `options`\n\nThe `confetti` parameter is a single optional `options` object, which has the following properties:\n\n- `particleCount` _Integer (default: 50)_: The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.\n- `angle` _Number (default: 90)_: The angle in which to launch the confetti, in degrees. 90 is straight up.\n- `spread` _Number (default: 45)_: How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined `angle` plus or minus 22.5 degrees.\n- `startVelocity` _Number (default: 45)_: How fast the confetti will start going, in pixels.\n- `decay` _Number (default: 0.9)_: How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.\n- `gravity` _Number (default: 1)_: How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.\n- `drift` _Number (default: 0)_: How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.\n- `flat` _Boolean (default: false)_: Optionally turns off the tilt and wobble that three dimensional confetti would have in the real world. Yeah, they look a little sad, but y'all asked for them, so don't blame me.\n- `ticks` _Number (default: 200)_: How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.\n- `origin` _Object_: Where to start firing confetti from. Feel free to launch off-screen if you'd like.\n  - `origin.x` _Number (default: 0.5)_: The `x` position on the page, with `0` being the left edge and `1` being the right edge.\n  - `origin.y` _Number (default: 0.5)_: The `y` position on the page, with `0` being the top edge and `1` being the bottom edge.\n- `colors` _Array&lt;String&gt;_: An array of color strings, in the HEX format... you know, like `#bada55`.\n- `shapes` _Array&lt;String|Shape&gt;_: An array of shapes for the confetti. There are 3 built-in values of `square`, `circle`, and `star`. The default is to use both squares and circles in an even mix. To use a single shape, you can provide just one shape in the array, such as `['star']`. You can also change the mix by providing a value such as `['circle', 'circle', 'square']` to use two third circles and one third squares. You can also create your own shapes using the [`confetti.shapeFromPath`](#confettishapefrompath-path-matrix---shape) or [`confetti.shapeFromText`](#confettishapefromtext-text-scalar-color-fontfamily---shape) helper methods.\n- `scalar` _Number (default: 1)_: Scale factor for each confetti particle. Use decimals to make the confetti smaller. Go on, try teeny tiny confetti, they are adorable!\n- `zIndex` _Integer (default: 100)_: The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher.\n- `disableForReducedMotion` _Boolean (default: false)_: Disables confetti entirely for users that [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). The `confetti()` promise will resolve immediately in this case.\n\n### `confetti.shapeFromPath({ path, matrix? })` → `Shape`\n\nThis helper method lets you create a custom confetti shape using an [SVG Path string](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d). Any valid path should work, though there are a few caveats:\n- All paths will be filed. If you were hoping to have a stroke path, that is not implemented.\n- Paths are limited to a single color, so keep that in mind.\n- All paths need a valid transform matrix. You can pass one in, or you can leave it out and use this helper to calculate the matrix for you. Do note that calculating the matrix is a bit expensive, so it is best to calculate it once for each path in development and cache that value, so that production confetti remain fast. The matrix is deterministic and will always be the same given the same path value.\n- For best forward compatibility, it is best to re-generate and re-cache the matrix if you update the `canvas-confetti` library.\n- Support for path-based confetti is limited to browsers which support [`Path2D`](https://developer.mozilla.org/en-US/docs/Web/API/Path2D), which should really be all major browser at this point.\n\nThis method will return a `Shape` -- it's really just a plain object with some properties, but shhh... we'll pretend it's a shape. Pass this `Shape` object into the `shapes` array directly.\n\nAs an example, here's how you might do a triangle confetti:\n\n```javascript\nvar triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });\n\nconfetti({\n  shapes: [triangle]\n});\n```\n\n### `confetti.shapeFromText({ text, scalar?, color?, fontFamily? })` → `Shape`\n\nThis is the highly anticipated feature to render emoji confetti! Use any standard unicode emoji. Or other text, but... maybe don't use other text.\n\nWhile any text should work, there are some caveats:\n- For flailing confetti, something that is mostly square works best. That is, a single character, especially an emoji.\n- Rather than rendering text every time a confetti is drawn, this helper actually rasterizes the text. Therefore, it does not scale well after it is created. If you plan to use the `scalar` value to scale your confetti, use the same `scalar` value here when creating the shape. This will make sure the confetti are not blurry.\n\nThe options for this method are:\n- `options` _`Object`_:\n  - `text` _`String`_: the text to be rendered as a confetti. If you can't make up your mind, I suggest \"🐈\".\n  - `scalar` _`Number, optional, default: 1`_: a scale value relative to the default size. It matches the `scalar` value in the confetti options.\n  - `color` _`String, optional, default: #000000`_: the color used to render the text.\n  - `fontFamily` _`String, optional, default: native emoji`_: the font family name to use when rendering the text. The default follows [best practices for rendring the native OS emoji of the device](https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/), falling back to `sans-serif`. If using a web font, make sure this [font is loaded](https://developer.mozilla.org/en-US/docs/Web/API/FontFace/load) before rendering your confetti.\n\n```javascript\nvar scalar = 2;\nvar pineapple = confetti.shapeFromText({ text: '🍍', scalar });\n\nconfetti({\n  shapes: [pineapple],\n  scalar\n});\n```\n\n### `confetti.create(canvas, [globalOptions])` → `function`\n\nThis method creates an instance of the `confetti` function that uses a custom canvas. This is useful if you want to limit the area on your page in which confetti appear. By default, this method will not modify the canvas in any way (other than drawing to it).\n\n_Canvas can be misunderstood a bit though, so let me explain why you might want to let the module modify the canvas just a bit. By default, a `canvas` is a relatively small image -- somewhere around 300x150, depending on the browser. When you resize it using CSS, this sets the display size of the canvas, but not the image being represented on that canvas. Think of it as loading a 300x150 jpeg image in an `img` tag and then setting the CSS for that tag to `1500x600` -- your image will end up stretched and blurry. In the case of a canvas, you need to also set the width and height of the canvas image itself. If you don't want to do that, you can allow `confetti` to set it for you._\n\nNote also that you should persist the custom instance and avoid initializing an instance of confetti with the same canvas element more than once.\n\nThe following global options are available:\n* `resize` _Boolean (default: false)_: Whether to allow setting the canvas image size, as well as keep it correctly sized if the window changes size (e.g. resizing the window, rotating a mobile device, etc.). By default, the canvas size will not be modified.\n* `useWorker` _Boolean (default: false)_: Whether to use an asynchronous web worker to render the confetti animation, whenever possible. This is turned off by default, meaning that the animation will always execute on the main thread. If turned on and the browser supports it, the animation will execute off of the main thread so that it is not blocking any other work your page needs to do. Using this option will also modify the canvas, but more on that directly below -- do read it. If it is not supported by the browser, this value will be ignored.\n* `disableForReducedMotion` _Boolean (default: false)_: Disables confetti entirely for users that [prefer reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). When set to true, use of this confetti instance will always respect a user's request for reduced motion and disable confetti for them.\n\n_**Important: If you use `useWorker: true`, I own your canvas now. It's mine now and I can do whatever I want with it (don't worry... I'll just put confetti inside it, I promise). You must not try to use the canvas in any way (other than I guess removing it from the DOM), as it will throw an error. When using workers for rendering, control of the canvas must be transferred to the web worker, preventing any usage of that canvas on the main thread. If you must manipulate the canvas in any way, do not use this option.**_\n\n```javascript\nvar myCanvas = document.createElement('canvas');\ndocument.body.appendChild(myCanvas);\n\nvar myConfetti = confetti.create(myCanvas, {\n  resize: true,\n  useWorker: true\n});\nmyConfetti({\n  particleCount: 100,\n  spread: 160\n  // any other options from the global\n  // confetti function\n});\n```\n\n### `confetti.reset()`\n\nStops the animation and clears all confetti, as well as immediately resolves any outstanding promises. In the case of a separate confetti instance created with [`confetti.create`](#confetticreatecanvas-globaloptions--function), that instance will have its own `reset` method.\n\n```javascript\nconfetti();\n\nsetTimeout(() => {\n  confetti.reset();\n}, 100);\n```\n\n```javascript\nvar myCanvas = document.createElement('canvas');\ndocument.body.appendChild(myCanvas);\n\nvar myConfetti = confetti.create(myCanvas, { resize: true });\n\nmyConfetti();\n\nsetTimeout(() => {\n  myConfetti.reset();\n}, 100);\n```\n\n## Examples\n\nLaunch some confetti the default way:\n\n```javascript\nconfetti();\n```\n\nLaunch a bunch of confetti:\n\n```javascript\nconfetti({\n  particleCount: 150\n});\n```\n\nLaunch some confetti really wide:\n\n```javascript\nconfetti({\n  spread: 180\n});\n```\n\nGet creative. Launch a small poof of confetti from a random part of the page:\n\n```javascript\nconfetti({\n  particleCount: 100,\n  startVelocity: 30,\n  spread: 360,\n  origin: {\n    x: Math.random(),\n    // since they fall down, start a bit higher than random\n    y: Math.random() - 0.2\n  }\n});\n```\n\nI said creative... we can do better. Since it doesn't matter how many times we call `confetti` (just the total number of confetti in the air), we can do some fun things, like continuously launch more and more confetti for 30 seconds, from multiple directions:\n\n```javascript\n// do this for 30 seconds\nvar duration = 30 * 1000;\nvar end = Date.now() + duration;\n\n(function frame() {\n  // launch a few confetti from the left edge\n  confetti({\n    particleCount: 7,\n    angle: 60,\n    spread: 55,\n    origin: { x: 0 }\n  });\n  // and launch a few from the right edge\n  confetti({\n    particleCount: 7,\n    angle: 120,\n    spread: 55,\n    origin: { x: 1 }\n  });\n\n  // keep going until we are out of time\n  if (Date.now() < end) {\n    requestAnimationFrame(frame);\n  }\n}());\n```\n"
  },
  {
    "path": "bin/on_failure.sh",
    "content": "green=`tput setaf 2`\nreset=`tput sgr0`\n\nline_break () {\n  echo --------------------------------------\n}\n\nprint_green () {\n  echo \"${green}$@${reset}\"\n}\n\nupload_file () {\n  filename=$1\n  urlname=${filename// /_}\n\n  downloadurl=`curl -sS --upload-file \"./$filename\" https://transfer.sh/$urlname`\n\n  echo image \\\"$filename\\\"\n  print_green \"  uploaded to: $downloadurl\"\n}\n\nfind_files () {\n  cd shots\n\n  echo list of files present:\n  ls -l\n  line_break\n\n  for i in *.png;do upload_file \"$i\";done\n}\n\nfind_files\n"
  },
  {
    "path": "build/.eslintrc.yml",
    "content": "env:\n  es6: true\n  node: true\n  browser: false\nparser: babel-eslint\nrules:\n  no-console: off\n"
  },
  {
    "path": "build/build.js",
    "content": "const fs = require('fs');\nconst { promisify } = require('util');\n\nconst { name, version, main } = require('../package.json');\n\nconst buildDate = (new Date()).toISOString();\n\nfunction mkdir(dir) {\n  return promisify(fs.mkdir)(dir).then(() => {\n    return Promise.resolve();\n  }).catch(err => {\n    if (err.code === 'EEXIST') {\n      return Promise.resolve();\n    }\n\n    return Promise.reject(err);\n  });\n}\n\nfunction readFile(file, encoding) {\n  return promisify(fs.readFile)(file, encoding);\n}\n\nfunction writeFile(file, content) {\n  return promisify(fs.writeFile)(file, content);\n}\n\nfunction buildCommonJs(content) {\n  return `// ${name} v${version} built on ${buildDate}\n!(function (window, module) {\n// source content\n${content}\n// end source content\n\n  window.confetti = module.exports;\n}(window, {}));\n`;\n}\n\nfunction buildModule(content) {\n  return `// ${name} v${version} built on ${buildDate}\nvar module = {};\n\n// source content\n${content}\n// end source content\n\nexport default module.exports;\nexport var create = module.exports.create;\n`;\n}\n\nmkdir('dist')\n.then(() => readFile(main))\n.then(file => {\n  return Promise.all([\n    writeFile('dist/confetti.browser.js', buildCommonJs(file)),\n    writeFile('dist/confetti.module.mjs', buildModule(file))\n  ]);\n})\n.catch(err => {\n  console.error(err);\n  process.exitCode = 1;\n});\n"
  },
  {
    "path": "build/serve.js",
    "content": "const path = require('path');\nconst http = require('http');\nconst send = require('send');\nconst root = require('rootrequire');\nconst { networkInterfaces } = require('os');\n\nconst PORT = 9001;\n\nhttp.createServer(function (req, res) {\n  const url = req.url === '/' ? '/index.html' : req.url;\n  const file = path.resolve(root, url.slice(1));\n\n  console.log(req.method, url, '->', file);\n\n  const cspRules = [\n    `default-src 'self' https://cdnjs.cloudflare.com`,\n    `img-src * data: blob:`,\n    `media-src * data: blob:`,\n    `font-src https://fonts.googleapis.com https://fonts.gstatic.com`,\n    `style-src 'self' 'unsafe-inline' https://fonts.googleapis.com`,\n    `script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdnjs.cloudflare.com`,\n    `worker-src 'self' blob:`\n  ];\n\n  res.setHeader('content-security-policy', cspRules.join('; '));\n\n  send(req, file).pipe(res);\n}).listen(PORT, () => {\n  console.log('listening at:');\n  console.log(`  http://localhost:${PORT}`);\n\n  Object.values(networkInterfaces())\n    .reduce((memo, value) => [...memo, ...value], [])\n    .filter(value => value.family === 'IPv4')\n    .forEach(({ address }) => console.log(`  http://${address}:${PORT}`));\n});\n\n\n// twitch csp... see !112\n//  default-src 'self' https://6rh8h42nhnjmirlyxc0w9lbpmeehi0.ext-twitch.tv\n//  block-all-mixed-content\n//  img-src * data: blob:\n//  media-src * data: blob:\n//  frame-ancestors https://supervisor.ext-twitch.tv https://extension-files.twitch.tv https://*.twitch.tv https://*.twitch.tech https://localhost.twitch.tv:* https://localhost.twitch.tech:* http://localhost.rig.twitch.tv:*\n//  font-src https://6rh8h42nhnjmirlyxc0w9lbpmeehi0.ext-twitch.tv https://fonts.googleapis.com https://fonts.gstatic.com\n//  style-src 'self' 'unsafe-inline' https://6rh8h42nhnjmirlyxc0w9lbpmeehi0.ext-twitch.tv https://fonts.googleapis.com\n//  connect-src https: wss: https://www.google-analytics.com https://stats.g.doubleclick.net\n//  script-src 'self' https://6rh8h42nhnjmirlyxc0w9lbpmeehi0.ext-twitch.tv https://extension-files.twitch.tv https://www.google-analytics.com\n"
  },
  {
    "path": "fixtures/debug.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Debug emoji confetti</title>\n</head>\n<body>\n  <script>\n    // this page is a demo that is not built, so fudge the module.exports support\n    // define a global `module` so that the actual source file can use it\n    window.module = {};\n  </script>\n  <script src=\"../src/confetti.js\"></script>\n  <script>\n    // define the `module.exports` as the `confetti` global, the way that the\n    // cdn distributed file would\n    window.confetti = module.exports;\n  </script>\n\n  <p><button id=\"test-confetti\">Emoji confetti test</button></p>\n  <canvas id=\"debug-canvas\" width=\"600\" height=\"650\" style=\"outline: 1px solid red\"></canvas>\n  <p id=\"test-text\"></p>\n\n  <script>\n    const loadFonts = async () => {\n      const isSafari = navigator.vendor === 'Apple Computer, Inc.';\n      const fontName = 'Noto Color Emoji';\n\n      await Promise.all([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => {\n        const safari = `url(https://fonts.gstatic.com/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diysYTngZPnMC1MfLd4hQ.${n}.woff2)`;\n        const realBrowser = `url(https://fonts.gstatic.com/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.${n}.woff2)`;\n\n        const fontFile = new FontFace(\n          fontName,\n          isSafari ? safari : realBrowser\n        );\n\n        document.fonts.add(fontFile);\n\n        return fontFile.load();\n      }));\n\n      return `\"${fontName}\"`;\n    };\n\n    const connectTest = ({ fontFamily }) => {\n      const button = document.getElementById('test-confetti');\n\n      const scalar = 3;\n\n      // make this a getter so that the shapes don't initialize on page load\n      const getShapes = ((shapes) => () => {\n        if (shapes.length) {\n          return shapes;\n        }\n\n        shapes = [\n          ['🦄', '🍑', '🤣', '🐈', 'bg'].map(text => confetti.shapeFromText({ text, scalar })),\n          ['🦄', '🍑', '🤣', '🐈', 'bg'].map(text => confetti.shapeFromText({ text, scalar, fontFamily }))\n        ];\n\n        return shapes;\n      })([]);\n\n      button.onclick = () => {\n        const [shapesDefault, shapesFont] = getShapes();\n\n        confetti({\n          particleCount: 10,\n          shapes: shapesDefault,\n          scalar,\n          origin: { y: 0.7, x: 0.25 }\n        });\n        confetti({\n          particleCount: 10,\n          shapes: shapesFont,\n          scalar,\n          origin: { y: 0.7, x: 0.75 }\n        });\n      };\n    };\n\n    const drawBitmapToCanvas = (bitmap) => {\n      const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);\n      const ctx = canvas.getContext('2d');\n\n      ctx.drawImage(bitmap, 0, 0);\n\n      return canvas;\n    };\n\n    const drawTransformedEmoji = async ({ fontFamily, canvas, ctx, offsetX = 0, offsetY = 0 }) => {\n      ['🦄', '🍑', '🤣', '🐈'].forEach((text, idx) => {\n        const shape1 = confetti.shapeFromText({ text, scalar: 1, fontFamily });\n        const shape2 = confetti.shapeFromText({ text, scalar: 2, fontFamily });\n        const shape5 = confetti.shapeFromText({ text, scalar: 5, fontFamily });\n\n        const y = idx * 100 + 50 + offsetY;\n\n        ctx.drawImage(shape1.bitmap, 0, y);\n        ctx.drawImage(shape2.bitmap, 100, y);\n        ctx.drawImage(shape5.bitmap, 200, y);\n\n        [[shape1, 1], [shape2, 2], [shape5, 5]].forEach(([shape, scale], j) => {\n          const x = 300 + (j * 100) + offsetX;\n\n          const rotation = 3.2;\n          const scaleX = scale * 0.8;\n          const scaleY = scale * 1.4;\n\n          var matrix = new DOMMatrix([\n            Math.cos(rotation) * scaleX,\n            Math.sin(rotation) * scaleX,\n            -Math.sin(rotation) * scaleY,\n            Math.cos(rotation) * scaleY,\n            x,\n            y\n          ]);\n          matrix.multiplySelf(new DOMMatrix(shape.matrix));\n\n          const pattern = (() => {\n            try {\n              // most browsers support this, it's spec\n              return ctx.createPattern(shape.bitmap, 'no-repeat');\n            } catch (e) {\n              // safari doesn't, because of course it doesn't\n              // so draw the bitmap to a canvas first and create a\n              // pattern from that canvas\n              console.log('failed to create bitmap pattern:', e);\n              return ctx.createPattern(drawBitmapToCanvas(shape.bitmap), 'no-repeat');\n            }\n          })();\n\n          pattern.setTransform(matrix);\n\n          ctx.fillStyle = pattern;\n          ctx.fillRect(x - 100, y - 100, 300, 300);\n        });\n      });\n    };\n\n    const drawDebugEmoji = async ({ fontFamily, canvas, ctx, offsetX = 0, offsetY = 0 }) => {\n      const text = '🦄';\n\n      const draw = ({ offsetX, offsetY, fontFamily }) => {\n        const opts = { text, scalar: 15 };\n\n        if (fontFamily) {\n          opts.fontFamily = fontFamily;\n        }\n\n        const shape = confetti.shapeFromText(opts);\n\n        ctx.drawImage(shape.bitmap, offsetX, offsetY);\n\n        ctx.lineWidth = 1;\n        ctx.strokeStyle = 'orange';\n        ctx.strokeRect(offsetX, offsetY, shape.bitmap.width, shape.bitmap.height);\n\n        return { width: shape.bitmap.width, height: shape.bitmap.height };\n      };\n\n      const { width, height: height1 } = draw({ offsetX: 10 + offsetX, offsetY: 10 + offsetY });\n      const { height: height2 } = draw({ offsetX: 20 + width + offsetX, offsetY: 10 + offsetY, fontFamily });\n\n      return Math.max(height1, height2);\n    };\n\n    const renderTestText = ({ fontFamily }) => {\n      const fontSize = '20px';\n      const text = document.getElementById('test-text');\n\n      const withFont = document.createElement('div');\n      Object.assign(withFont.style, { fontFamily, fontSize });\n      withFont.appendChild(document.createTextNode(`plain text in ${fontFamily}: 🦄 🍑 🤣`));\n\n      const withSystemUI = document.createElement('div');\n      Object.assign(withSystemUI.style, { fontFamily: '\"system ui\"', fontSize });\n      withSystemUI.appendChild(document.createTextNode(`plain text in \"system ui\": 🦄 🍑 🤣`));\n\n      text.appendChild(withFont);\n      text.appendChild(withSystemUI);\n    };\n\n    Promise.resolve().then(async () => {\n      // const fontFamily = null;\n      const fontFamily = await loadFonts();\n\n      const canvas = document.querySelector('#debug-canvas');\n      const ctx = canvas.getContext('2d');\n\n      renderTestText({ fontFamily });\n\n      connectTest({ fontFamily, canvas, ctx });\n\n      await drawDebugEmoji({ fontFamily, canvas, ctx });\n      await drawTransformedEmoji({ fontFamily, canvas, ctx, offsetY: 200 });\n    }).catch(e => {\n      console.log('something went wrong:', e);\n    });\n  </script>\n</body>\n</html>\n"
  },
  {
    "path": "fixtures/page.browserify.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>test harness</title>\n</head>\n<body>\n  <script src=\"/temp/confetti.bundle.js\"></script>\n\n  <script>\n    document.addEventListener('click', function () {\n      confetti();\n    });\n  </script>\n</body>\n</html>\n"
  },
  {
    "path": "fixtures/page.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>test harness</title>\n\n  <style>\n    html, body {\n      padding: 0;\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    }\n  </style>\n</head>\n<body>\n  <script src=\"/dist/confetti.browser.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "fixtures/page.minified.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>test harness</title>\n</head>\n<body>\n  <script src=\"/temp/confetti.min.js\"></script>\n\n  <script>\n    document.addEventListener('click', function () {\n      confetti();\n    });\n  </script>\n</body>\n</html>\n"
  },
  {
    "path": "fixtures/page.module.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>test harness</title>\n\n  <style>\n    html, body {\n      padding: 0;\n      margin: 0;\n      width: 100%;\n      height: 100%;\n    }\n  </style>\n</head>\n<body>\n  <script type=\"module\">\n    import confetti, { create } from '/dist/confetti.module.mjs';\n\n    if (window.confetti) {\n      throw 'nope';\n    }\n\n    window.confettiAlias = confetti;\n    window.createAlias = create;\n  </script>\n</body>\n</html>\n"
  },
  {
    "path": "index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <meta name=\"description\" content=\"Component for drawing confetti on a canvas\">\n  <meta name=\"author\" content=\"Kiril Vatev\">\n  <meta name=\"keywords\" content=\"canvas,confetti,component,module,animation,javascript,catdad\">\n\n  <meta name=\"theme-color\" content=\"#393939\">\n  <link id=\"favicon\" rel=\"shortcut icon\" type=\"image/png\" />\n\n  <title>canvas confetti</title>\n\n  <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root {\n      --primary-color: #eeeeee;\n      --secondary-color: #363636;\n      --secondary-variant-color: #272727;\n      --background-color: #212121;\n      --inner-color: #ffffff;\n      --border-color: #555651;\n\n      /* icons by Google - Material Design\n       * https://material.io/resources/icons/?style=baseline\n       */\n      --switch-moon-white: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-.89 0-1.74-.2-2.5-.55C11.56 16.5 13 14.42 13 12s-1.44-4.5-3.5-5.45C10.26 6.2 11.11 6 12 6c3.31 0 6 2.69 6 6s-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E\");\n      --switch-sun-black: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'%3E%3C/path%3E%3C/svg%3E\");\n      --switch-auto-white: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23eeeeee' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E\");\n      --switch-auto-black: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='%23212121' d='M10.85 12.65h2.3L12 9l-1.15 3.65zM20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM14.3 16l-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9z'%3E%3C/path%3E%3C/svg%3E\");\n\n      --theme-switch: var(--switch-moon-white);\n    }\n\n    [data-theme=\"light\"] {\n      --primary-color: #212121;\n      --secondary-color: #ffffff;\n      --background-color: #f0f0f0;\n      --inner-color: #363636;\n\n      --theme-switch: var(--switch-sun-black);\n    }\n\n    [auto-theme] {\n      --theme-switch: var(--switch-auto-white);\n    }\n\n    [data-theme=\"light\"][auto-theme] {\n      --theme-switch: var(--switch-auto-black);\n    }\n    \n    html {\n      scroll-behavior: smooth;\n    }\n\n    html, body {\n      margin: 0;\n      padding: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    body {\n      background: var(--background-color);\n      color: var(--primary-color);\n      font-size: 1em;\n      font-family: 'Noto Sans', sans-serif;\n    }\n\n    * {\n      box-sizing: border-box;\n    }\n\n    .sprite {\n      display: none;\n    }\n\n    header {\n      position: absolute;\n      top: 0;\n      left: 0;\n      display: flex;\n      justify-content: flex-end;\n      align-items: center;\n      width: 100%;\n      height: 64px;\n    }\n\n    .theme {\n      --size: 28px;\n      position: relative;\n      display: inline-block;\n      width: var(--size);\n      height: var(--size);\n      background: none;\n      border: none;\n      outline: none;\n      margin-right: 12px;\n      cursor: pointer;\n    }\n\n    .theme:after {\n      position: absolute;\n      top: 0;\n      left: 0;\n      content: \"\";\n      width: var(--size);\n      height: var(--size);\n      background-repeat: no-repeat;\n      background-position: center;\n      background: var(--theme-switch);\n    }\n\n    .github-icon {\n      --size: 36px;\n      position: relative;\n      display: block;\n      width: var(--size);\n      height: var(--size);\n      margin-right: 12px;\n    }\n\n    .github-icon svg.icon {\n      fill: var(--primary-color);\n    }\n\n    h1, h2, .center {\n      text-align: center;\n    }\n\n    h1 {\n      margin-top: 64px;\n    }\n\n    h2 {\n      padding: 0;\n      margin: 0.25em;\n    }\n\n    p {\n      margin: 0.5em;\n    }\n\n    .container {\n      position: relative;\n      max-width: 1000px;\n      width: 100%;\n      margin: 0 auto;\n    }\n\n    .group {\n      position: relative;\n      width: 100%;\n      margin: 40px 0;\n      padding-top: 16px;\n\n      border-top: 1px solid var(--border-color);\n      border-radius: 20px;\n    }\n\n    .run {\n      padding: 10px 6px;\n      margin: 0.75em auto;\n      max-width: 200px;\n      width: 100%;\n      display: inline-block;\n\n      background: var(--secondary-color);\n      border: none;\n      outline: none;\n\n      color: var(--inner-color);\n      font-weight: bold;\n      cursor: pointer;\n      user-select: none;\n\n      opacity: 0.8;\n      transition: opacity 100ms ease;\n    }\n\n    .group .run:hover {\n      opacity: 1;\n    }\n\n    .editor {\n      position: relative;\n      min-height: 100px;\n      width: 100%;\n    }\n\n    .editor.ace_dark.ace_editor {\n      background-color: var(--secondary-color);\n    }\n    .editor.ace_dark .ace_gutter {\n      background: var(--secondary-variant-color);\n    }\n    .editor.ace_dark .ace_gutter .ace_gutter-cell {\n      color: var(--inner-color);\n      opacity: 0.6;\n    }\n\n    .flex-rows {\n      position: relative;\n      display: block;\n      width: 100%;\n      padding-bottom: 1em;\n    }\n\n    .description {\n      width: 94%;\n      margin: 10px auto;\n      padding: 0;\n\n      align-items: center;\n      line-height: 1.5;\n    }\n\n    .left {\n      flex-grow: 1;\n      display: flex;\n      flex-direction: column;\n    }\n\n    a.anchor {\n      position: relative;\n      color: currentColor;\n      text-decoration: none;\n    }\n\n    a.anchor:hover::before {\n      content: \"🔗\";\n      color: currentColor;\n      position: absolute;\n      left: -2rem;\n      top: 0;\n      transform: scale(0.75, 0.75);\n    }\n\n    footer {\n      font-size: 0.9rem;\n      text-align: center;\n      line-height: 2;\n\n      background: var(--secondary-color);\n    }\n\n    footer span {\n      vertical-align: middle;\n    }\n\n    span.icon {\n      position: relative;\n      display: inline-block;\n      height: 1em;\n      width: 1em;\n    }\n    svg.icon {\n      position: absolute;\n      pointer-events: none;\n      left: 0;\n      width: 100%;\n      height: 100%;\n\n      fill: var(--inner-color);\n    }\n\n    footer a {\n      text-decoration: none;\n      color: var(--inner-color);\n      opacity: 0.85;\n      will-change: opacity;\n    }\n\n    footer a:hover {\n      opacity: 1;\n    }\n\n    .custom-canvas {\n      margin-top: 30px;\n      width: 100%;\n      max-width: 1000px;\n      height: 380px;\n      background: var(--secondary-color);\n    }\n\n    @media (min-width: 44em) {\n      .container {\n        width: 95%;\n      }\n\n      .flex-rows {\n        display: flex;\n        flex-direction: row;\n      }\n\n      .description {\n        width: 66%;\n        padding: 0 0 0 1em;\n      }\n    }\n  </style>\n\n  <script>\n    // this page is a demo that is not built, so fudge the module.exports support\n    // define a global `module` so that the actual source file can use it\n    window.module = {};\n  </script>\n  <script src=\"src/confetti.js\"></script>\n  <script>\n    // define the `module.exports` as the `confetti` global, the way that the\n    // cdn distributed file would\n    window.confetti = module.exports;\n  </script>\n\n  <script defer src=\"https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.0/ace.js\"></script>\n  <script defer src=\"https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.min.js\"></script>\n</head>\n<body>\n\n  <svg class=\"sprite\" xmlns=\"http://www.w3.org/2000/svg\">\n    <defs>\n      <symbol id=\"code\" viewBox=\"0 0 14 16\">\n        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->\n        <path d=\"M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3 9.5 3ZM4.5 3L0 8 4.5 13 6 11.5 2.5 8 6 4.5 4.5 3 4.5 3Z\"/>\n      </symbol>\n\n      <symbol id=\"heart\" viewBox=\"0 0 12 16\">\n        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->\n        <path d=\"M11.2 3C10.68 2.37 9.95 2.05 9 2 8.03 2 7.31 2.42 6.8 3 6.29 3.58 6.02 3.92 6 4 5.98 3.92 5.72 3.58 5.2 3 4.68 2.42 4.03 2 3 2 2.05 2.05 1.31 2.38 0.8 3 0.28 3.61 0.02 4.28 0 5 0 5.52 0.09 6.52 0.67 7.67 1.25 8.82 3.01 10.61 6 13 8.98 10.61 10.77 8.83 11.34 7.67 11.91 6.51 12 5.5 12 5 11.98 4.28 11.72 3.61 11.2 2.98L11.2 3Z\"/>\n      </symbol>\n\n      <symbol id=\"run\" viewBox=\"0 0 10 10\">\n        <path d=\"M2 2L8 6L2 10\" />\n      </symbol>\n\n      <symbol id=\"octo\" viewBox=\"0 0 16 16\">\n        <!-- Icon from GitHub Octicons - https://github.com/primer/octicons/ -->\n        <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z\"/>\n      </symbol>\n    </defs>\n  </svg>\n\n  <header>\n    <button id=\"themeToggle\" title=\"Switch Theme\" class=\"theme\"></button>\n    <a class=\"github-icon\" title=\"Visit on GitHub\" href=\"https://github.com/catdad/canvas-confetti\" aria-label=\"View source on Github\">\n      <svg class=\"icon\"><use xlink:href=\"#octo\"></use></svg>\n    </a>\n  </header>\n\n  <h1>Canvas Confetti</h1>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"cannon\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#basic\" id=\"basic\" class=\"anchor\">Basic Cannon</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            The default mode... just your regular basic average blast of confetti. But it's still\n            a little cool, right?\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"random\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#random\" id=\"random\" class=\"anchor\">Random Direction</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            Go crazy with some randomness. Shoot a random amount of confetti in random directions.\n            (Go ahead... you know you want to click that button more than once.)\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"realistic\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#realistic\" id=\"realistic\" class=\"anchor\">Realistic Look</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            If you happened to get curious and changed the particle count to 400 or so, you saw\n            something disappointing. An even \"flattened cone\" look to the confetti, making it look\n            way too perfect and ruining the illusion. We can fix that by mixing a few effects together.\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"fireworks\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#fireworks\" id=\"fireworks\" class=\"anchor\">Fireworks</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            Why click a button repeatedly when you can have code do it for you? Shoot some firework\n            of confetti from the sides of page so you can still read the content in the center.\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"stars\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#stars\" id=\"stars\" class=\"anchor\">Stars</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            You can combine multiple calls to confetti with any settings in order to create\n            a more complex effect. Go ahead, combine different shapes, sizes, etc. Stagger them\n            for an extra boost of excitement.\n          </p>\n          <p class=\"center\">✨ Celebrate with a burst of stars! ✨</p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"snow\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#snow\" id=\"snow\" class=\"anchor\">Snow</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            The effect is not limited to crazy rapid fire of confetti though. You can create a\n            wintery mood with gently falling particles across the entire page.\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"continuous\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#continuous\" id=\"continuous\" class=\"anchor\">School Pride</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            But if you are into crazy rapid fire of confetti, what could be a better use than\n            to show everyone what you are all about? Tell people where you are from with two\n            confetti cannons from either side of the page.\n          </p>\n          <p class=\"center\">🌰 Go Buckeyes! 🌰</p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"paths\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#paths\" id=\"paths\" class=\"anchor\">Custom Shapes</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            Celebrate some holidays with holiday-appropriate shapes! You can use any SVG path\n            to make a confetti out of it. Go wild!\n          </p>\n          <p class=\"center\">🎃🎄💜</p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"emoji\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#emoji\" id=\"emoji\" class=\"anchor\">Emoji</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            Don't know any custom shapes? That's okay, just use emoji instead! That's what they\n            are for anyway. I mean... why do they even exist if we weren't supposed to make\n            confetti out of them? Think about it.\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n    </div>\n  </div>\n\n  <div class=\"container\">\n    <div class=\"group\" data-name=\"custom\">\n      <div class=\"flex-rows\">\n        <div class=\"left\">\n          <h2><a href=\"#custom-canvas\" id=\"custom-canvas\" class=\"anchor\">Custom Canvas</a></h2>\n          <button class=\"run\">\n            Run\n            <span class=\"icon\">\n              <svg class=\"icon\"><use xlink:href=\"#run\"></use></svg>\n            </span>\n          </button>\n        </div>\n        <div class=\"description\">\n          <p>\n            But if you just hate confetti all over the place, there's something here for you\n            as well. You can limit where the confetti appear by providing your own canvas element.\n          </p>\n        </div>\n      </div>\n      <div class=\"editor\"></div>\n      <div class=\"flex-rows\">\n        <canvas id=\"my-canvas\" class=\"custom-canvas\"></canvas>\n      </div>\n    </div>\n  </div>\n\n  <footer>\n    <a href=\"https://github.com/catdad\">\n      <span class=\"icon\">\n        <svg class=\"icon\"><use xlink:href=\"#code\"></use></svg>\n      </span>\n      <span> with </span>\n      <span class=\"icon\">\n        <svg class=\"icon\"><use xlink:href=\"#heart\"></use></svg>\n      </span>\n      <span> by <b>catdad</b></span>\n    </a>\n  </footer>\n\n  <script>\n    var editors = [];\n    var activeTheme = 'dark';\n    var currentStep = parseInt(localStorage.getItem('canvas-confetti/theme'), 10) || 0;\n    var prefersLightTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)');\n    var themes = {\n      light: 'ace/theme/xcode',\n      dark: 'ace/theme/monokai'\n    };\n\n    var getPreferedTheme = function () {\n      return prefersLightTheme ? prefersLightTheme.matches ? 'light' : 'dark' : 'dark';\n    };\n\n    var setTheme = function (isAuto, theme) {\n      if (isAuto) {\n        document.body.setAttribute('auto-theme', true);\n        activeTheme = getPreferedTheme();\n      } else {\n        document.body.removeAttribute('auto-theme');\n        activeTheme = theme;\n      }\n\n      document.body.setAttribute('data-theme', activeTheme);\n\n      editors.forEach(function(editor) {\n        editor.setTheme(themes[activeTheme]);\n      });\n    };\n\n    var updateTheme = function (step) {\n      currentStep = step;\n\n      switch (step) {\n        case 0:\n          setTheme(true);\n          prefersLightTheme && prefersLightTheme.addEventListener('change', setTheme);\n          break;\n        case 1:\n        case 2:\n          setTheme(false, step === 1 ? 'dark' : 'light');\n          prefersLightTheme && prefersLightTheme.removeListener(setTheme);\n          break;\n      }\n\n      localStorage.setItem('canvas-confetti/theme', currentStep);\n    }\n\n    updateTheme(currentStep);\n\n    document.getElementById('themeToggle').addEventListener('click', function (event) {\n      updateTheme(++currentStep % 3);\n    });\n\n    var modes = {\n      cannon: function cannon() {\n        confetti({\n          particleCount: 100,\n          spread: 70,\n          origin: { y: 0.6 }\n        });\n      },\n      random: function random() {\n        function randomInRange(min, max) {\n          return Math.random() * (max - min) + min;\n        }\n\n        confetti({\n          angle: randomInRange(55, 125),\n          spread: randomInRange(50, 70),\n          particleCount: randomInRange(50, 100),\n          origin: { y: 0.6 }\n        });\n      },\n      realistic: function realistic() {\n        var count = 200;\n        var defaults = {\n          origin: { y: 0.7 }\n        };\n\n        function fire(particleRatio, opts) {\n          confetti({\n            ...defaults,\n            ...opts,\n            particleCount: Math.floor(count * particleRatio)\n          });\n        }\n\n        fire(0.25, {\n          spread: 26,\n          startVelocity: 55,\n        });\n        fire(0.2, {\n          spread: 60,\n        });\n        fire(0.35, {\n          spread: 100,\n          decay: 0.91,\n          scalar: 0.8\n        });\n        fire(0.1, {\n          spread: 120,\n          startVelocity: 25,\n          decay: 0.92,\n          scalar: 1.2\n        });\n        fire(0.1, {\n          spread: 120,\n          startVelocity: 45,\n        });\n      },\n      fireworks: function fireworks() {\n        var duration = 15 * 1000;\n        var animationEnd = Date.now() + duration;\n        var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };\n\n        function randomInRange(min, max) {\n          return Math.random() * (max - min) + min;\n        }\n\n        var interval = setInterval(function () {\n          var timeLeft = animationEnd - Date.now();\n\n          if (timeLeft <= 0) {\n            return clearInterval(interval);\n          }\n\n          var particleCount = 50 * (timeLeft / duration);\n          // since particles fall down, start a bit higher than random\n          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } });\n          confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } });\n        }, 250);\n      },\n      snow: function snow() {\n        var duration = 15 * 1000;\n        var animationEnd = Date.now() + duration;\n        var skew = 1;\n\n        function randomInRange(min, max) {\n          return Math.random() * (max - min) + min;\n        }\n\n        (function frame() {\n          var timeLeft = animationEnd - Date.now();\n          var ticks = Math.max(200, 500 * (timeLeft / duration));\n          skew = Math.max(0.8, skew - 0.001);\n\n          confetti({\n            particleCount: 1,\n            startVelocity: 0,\n            ticks: ticks,\n            origin: {\n              x: Math.random(),\n              // since particles fall down, skew start toward the top\n              y: (Math.random() * skew) - 0.2\n            },\n            colors: ['#ffffff'],\n            shapes: ['circle'],\n            gravity: randomInRange(0.4, 0.6),\n            scalar: randomInRange(0.4, 1),\n            drift: randomInRange(-0.4, 0.4)\n          });\n\n          if (timeLeft > 0) {\n            requestAnimationFrame(frame);\n          }\n        }());\n      },\n      stars: function stars() {\n        var defaults = {\n          spread: 360,\n          ticks: 50,\n          gravity: 0,\n          decay: 0.94,\n          startVelocity: 30,\n          colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']\n        };\n\n        function shoot() {\n          confetti({\n            ...defaults,\n            particleCount: 40,\n            scalar: 1.2,\n            shapes: ['star']\n          });\n\n          confetti({\n            ...defaults,\n            particleCount: 10,\n            scalar: 0.75,\n            shapes: ['circle']\n          });\n        }\n\n        setTimeout(shoot, 0);\n        setTimeout(shoot, 100);\n        setTimeout(shoot, 200);\n      },\n      continuous: function continuous() {\n        var end = Date.now() + (15 * 1000);\n\n        // go Buckeyes!\n        var colors = ['#bb0000', '#ffffff'];\n\n        (function frame() {\n          confetti({\n            particleCount: 2,\n            angle: 60,\n            spread: 55,\n            origin: { x: 0 },\n            colors: colors\n          });\n          confetti({\n            particleCount: 2,\n            angle: 120,\n            spread: 55,\n            origin: { x: 1 },\n            colors: colors\n          });\n\n          if (Date.now() < end) {\n            requestAnimationFrame(frame);\n          }\n        }());\n      },\n      custom: function() {\n        var canvas = document.getElementById('my-canvas');\n\n        // you should  only initialize a canvas once, so save this function\n        // we'll save it to the canvas itself for the purpose of this demo\n        canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true });\n\n        canvas.confetti({\n          spread: 70,\n          origin: { y: 1.2 }\n        });\n      },\n      paths: function() {\n        // note: you CAN only use a path for confetti.shapeFrompath(), but for\n        // performance reasons it is best to use it once in development and save\n        // the result to avoid the performance penalty at runtime\n\n        // pumpkin shape from https://thenounproject.com/icon/pumpkin-5253388/\n        var pumpkin = confetti.shapeFromPath({\n          path: 'M449.4 142c-5 0-10 .3-15 1a183 183 0 0 0-66.9-19.1V87.5a17.5 17.5 0 1 0-35 0v36.4a183 183 0 0 0-67 19c-4.9-.6-9.9-1-14.8-1C170.3 142 105 219.6 105 315s65.3 173 145.7 173c5 0 10-.3 14.8-1a184.7 184.7 0 0 0 169 0c4.9.7 9.9 1 14.9 1 80.3 0 145.6-77.6 145.6-173s-65.3-173-145.7-173zm-220 138 27.4-40.4a11.6 11.6 0 0 1 16.4-2.7l54.7 40.3a11.3 11.3 0 0 1-7 20.3H239a11.3 11.3 0 0 1-9.6-17.5zM444 383.8l-43.7 17.5a17.7 17.7 0 0 1-13 0l-37.3-15-37.2 15a17.8 17.8 0 0 1-13 0L256 383.8a17.5 17.5 0 0 1 13-32.6l37.3 15 37.2-15c4.2-1.6 8.8-1.6 13 0l37.3 15 37.2-15a17.5 17.5 0 0 1 13 32.6zm17-86.3h-82a11.3 11.3 0 0 1-6.9-20.4l54.7-40.3a11.6 11.6 0 0 1 16.4 2.8l27.4 40.4a11.3 11.3 0 0 1-9.6 17.5z',\n          matrix: [0.020491803278688523, 0, 0, 0.020491803278688523, -7.172131147540983, -5.9016393442622945]\n        });\n        // tree shape from https://thenounproject.com/icon/pine-tree-1471679/\n        var tree = confetti.shapeFromPath({\n          path: 'M120 240c-41,14 -91,18 -120,1 29,-10 57,-22 81,-40 -18,2 -37,3 -55,-3 25,-14 48,-30 66,-51 -11,5 -26,8 -45,7 20,-14 40,-30 57,-49 -13,1 -26,2 -38,-1 18,-11 35,-25 51,-43 -13,3 -24,5 -35,6 21,-19 40,-41 53,-67 14,26 32,48 54,67 -11,-1 -23,-3 -35,-6 15,18 32,32 51,43 -13,3 -26,2 -38,1 17,19 36,35 56,49 -19,1 -33,-2 -45,-7 19,21 42,37 67,51 -19,6 -37,5 -56,3 25,18 53,30 82,40 -30,17 -79,13 -120,-1l0 41 -31 0 0 -41z',\n          matrix: [0.03597122302158273, 0, 0, 0.03597122302158273, -4.856115107913669, -5.071942446043165]\n        });\n        // heart shape from https://thenounproject.com/icon/heart-1545381/\n        var heart = confetti.shapeFromPath({\n          path: 'M167 72c19,-38 37,-56 75,-56 42,0 76,33 76,75 0,76 -76,151 -151,227 -76,-76 -151,-151 -151,-227 0,-42 33,-75 75,-75 38,0 57,18 76,56z',\n          matrix: [0.03333333333333333, 0, 0, 0.03333333333333333, -5.566666666666666, -5.533333333333333]\n        });\n\n        var defaults = {\n          scalar: 2,\n          spread: 180,\n          particleCount: 30,\n          origin: { y: -0.1 },\n          startVelocity: -35\n        };\n\n        confetti({\n          ...defaults,\n          shapes: [ pumpkin ],\n          colors: ['#ff9a00', '#ff7400', '#ff4d00']\n        });\n        confetti({\n          ...defaults,\n          shapes: [ tree ],\n          colors: ['#8d960f', '#be0f10', '#445404']\n        });\n        confetti({\n          ...defaults,\n          shapes: [ heart ],\n          colors: ['#f93963', '#a10864', '#ee0b93']\n        });\n      },\n      emoji: function () {\n        var scalar = 2;\n        var unicorn = confetti.shapeFromText({ text: '🦄', scalar });\n\n        var defaults = {\n          spread: 360,\n          ticks: 60,\n          gravity: 0,\n          decay: 0.96,\n          startVelocity: 20,\n          shapes: [unicorn],\n          scalar\n        };\n\n        function shoot() {\n          confetti({\n            ...defaults,\n            particleCount: 30\n          });\n\n          confetti({\n            ...defaults,\n            particleCount: 5,\n            flat: true\n          });\n\n          confetti({\n            ...defaults,\n            particleCount: 15,\n            scalar: scalar / 2,\n            shapes: ['circle']\n          });\n        }\n\n        setTimeout(shoot, 0);\n        setTimeout(shoot, 100);\n        setTimeout(shoot, 200);\n      }\n    };\n\n    function pretty(val) {\n      return js_beautify(val, { indent_size: 2, brace_style: 'preserve-inline', });\n    }\n\n    function getCode(name) {\n      // pretty-print the code, since we will use minified code in production\n      var code = pretty(modes[name].toString());\n      // take out the function wrapper, trim all whitespace\n      code = code.split('\\n').slice(1).slice(0, -1).map(function (s) {\n        return s.trim();\n      }).join('\\n');\n      // pretty-print again\n      return pretty(code);\n    }\n\n    window.onload = function () {\n      [].forEach.call(document.querySelectorAll('.group'), function (group) {\n        var name = group.getAttribute('data-name');\n        var button = group.querySelector('.run');\n        var codeElem = group.querySelector('.editor');\n\n        var editor = ace.edit(codeElem);\n        editor.setTheme(themes[activeTheme]);\n        editor.session.setMode('ace/mode/javascript');\n        editor.session.setUseSoftTabs(true);\n        editor.session.setTabSize(2);\n\n        editor.session.setValue(getCode(name));\n\n        var count = editor.session.getLength();\n\n        // set height so that all code is visible\n        codeElem.style.minHeight = (14 * count) + 1 + 'px';\n        codeElem.style.height = (count) + 'rem';\n\n        button.onclick = function (ev) {\n          // stop mobile browsers from zooming when clicking\n          // buttons repeatedly really fast\n          ev.preventDefault();\n\n          try {\n            eval(editor.getValue());\n          } catch (e) {\n            console.error(e);\n          }\n        };\n\n        editors.push(editor);\n      });\n    };\n  </script>\n\n  <script>\n    // render favicon live, because why not\n    addEventListener(\"load\", (event) => {\n      const image = confetti.shapeFromText('🎊', { scalar: 512/10 });\n      const canvas = new OffscreenCanvas(image.bitmap.width, image.bitmap.height);\n      const ctx = canvas.getContext('bitmaprenderer');\n      ctx.transferFromImageBitmap(image.bitmap);\n\n      canvas.convertToBlob().then(blob => {\n        const icon = document.getElementById('favicon');\n        icon.setAttribute('href', URL.createObjectURL(blob));\n      });\n    });\n  </script>\n\n  <script src=\"/analytics.js\" async></script>\n</body>\n</html>\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"canvas-confetti\",\n  \"version\": \"1.9.4\",\n  \"description\": \"performant confetti animation in the browser\",\n  \"main\": \"src/confetti.js\",\n  \"module\": \"dist/confetti.module.mjs\",\n  \"jsdelivr\": \"dist/confetti.browser.js\",\n  \"scripts\": {\n    \"build\": \"node build/build.js\",\n    \"browserify\": \"browserify --entry src/confetti.js --outfile temp/confetti.bundle.js --standalone confetti\",\n    \"minify\": \"terser --compress --mangle -o temp/confetti.min.js -- dist/confetti.browser.js\",\n    \"pretest\": \"npm run build -s && npm run browserify -s && npm run -s minify\",\n    \"test\": \"cd test && ava --verbose --serial\",\n    \"lint\": \"eslint src/**/*.js test/**/*.js build/**/*.js\",\n    \"dev\": \"node build/serve.js\",\n    \"devtest\": \"cross-env CONFETTI_SHOW=1 npm test\",\n    \"citest\": \"npm run test\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/catdad/canvas-confetti.git\"\n  },\n  \"author\": \"Kiril Vatev <vatev.1@gmail.com>\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"https://github.com/catdad/canvas-confetti/issues\"\n  },\n  \"homepage\": \"https://github.com/catdad/canvas-confetti#readme\",\n  \"devDependencies\": {\n    \"ava\": \"2.4.0\",\n    \"babel-eslint\": \"^8.2.1\",\n    \"browserify\": \"^15.2.0\",\n    \"cross-env\": \"^5.1.3\",\n    \"eslint\": \"^8.57.1\",\n    \"eslint-plugin-ava\": \"^13.2.0\",\n    \"jimp\": \"^0.2.28\",\n    \"puppeteer\": \"^19.11.1\",\n    \"rootrequire\": \"^1.0.0\",\n    \"send\": \"^0.16.1\",\n    \"terser\": \"^3.14.1\"\n  },\n  \"keywords\": [\n    \"canvas\",\n    \"confetti\",\n    \"animation\",\n    \"burst\",\n    \"fireworks\",\n    \"snow\",\n    \"particles\"\n  ],\n  \"funding\": {\n    \"type\": \"donate\",\n    \"url\": \"https://www.paypal.me/kirilvatev\"\n  }\n}\n"
  },
  {
    "path": "src/confetti.js",
    "content": "/* globals Map */\n\n(function main(global, module, isWorker, workerSize) {\n  var canUseWorker = !!(\n    global.Worker &&\n    global.Blob &&\n    global.Promise &&\n    global.OffscreenCanvas &&\n    global.OffscreenCanvasRenderingContext2D &&\n    global.HTMLCanvasElement &&\n    global.HTMLCanvasElement.prototype.transferControlToOffscreen &&\n    global.URL &&\n    global.URL.createObjectURL);\n\n  var canUsePaths = typeof Path2D === 'function' && typeof DOMMatrix === 'function';\n  var canDrawBitmap = (function () {\n    // this mostly supports ssr\n    if (!global.OffscreenCanvas) {\n      return false;\n    }\n\n    try {\n      var canvas = new OffscreenCanvas(1, 1);\n      var ctx = canvas.getContext('2d');\n      ctx.fillRect(0, 0, 1, 1);\n      var bitmap = canvas.transferToImageBitmap();\n      ctx.createPattern(bitmap, 'no-repeat');\n    } catch (e) {\n      return false;\n    }\n\n    return true;\n  })();\n\n  function noop() {}\n\n  // create a promise if it exists, otherwise, just\n  // call the function directly\n  function promise(func) {\n    var ModulePromise = module.exports.Promise;\n    var Prom = ModulePromise !== void 0 ? ModulePromise : global.Promise;\n\n    if (typeof Prom === 'function') {\n      return new Prom(func);\n    }\n\n    func(noop, noop);\n\n    return null;\n  }\n\n  var bitmapMapper = (function (skipTransform, map) {\n    // see https://github.com/catdad/canvas-confetti/issues/209\n    // creating canvases is actually pretty expensive, so we should create a\n    // 1:1 map for bitmap:canvas, so that we can animate the confetti in\n    // a performant manner, but also not store them forever so that we don't\n    // have a memory leak\n    return {\n      transform: function(bitmap) {\n        if (skipTransform) {\n          return bitmap;\n        }\n\n        if (map.has(bitmap)) {\n          return map.get(bitmap);\n        }\n\n        var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);\n        var ctx = canvas.getContext('2d');\n        ctx.drawImage(bitmap, 0, 0);\n\n        map.set(bitmap, canvas);\n\n        return canvas;\n      },\n      clear: function () {\n        map.clear();\n      }\n    };\n  })(canDrawBitmap, new Map());\n\n  var raf = (function () {\n    var TIME = Math.floor(1000 / 60);\n    var frame, cancel;\n    var frames = {};\n    var lastFrameTime = 0;\n\n    if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {\n      frame = function (cb) {\n        var id = Math.random();\n\n        frames[id] = requestAnimationFrame(function onFrame(time) {\n          if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {\n            lastFrameTime = time;\n            delete frames[id];\n\n            cb();\n          } else {\n            frames[id] = requestAnimationFrame(onFrame);\n          }\n        });\n\n        return id;\n      };\n      cancel = function (id) {\n        if (frames[id]) {\n          cancelAnimationFrame(frames[id]);\n        }\n      };\n    } else {\n      frame = function (cb) {\n        return setTimeout(cb, TIME);\n      };\n      cancel = function (timer) {\n        return clearTimeout(timer);\n      };\n    }\n\n    return { frame: frame, cancel: cancel };\n  }());\n\n  var getWorker = (function () {\n    var worker;\n    var prom;\n    var resolves = {};\n\n    function decorate(worker) {\n      function execute(options, callback) {\n        worker.postMessage({ options: options || {}, callback: callback });\n      }\n      worker.init = function initWorker(canvas) {\n        var offscreen = canvas.transferControlToOffscreen();\n        worker.postMessage({ canvas: offscreen }, [offscreen]);\n      };\n\n      worker.fire = function fireWorker(options, size, done) {\n        if (prom) {\n          execute(options, null);\n          return prom;\n        }\n\n        var id = Math.random().toString(36).slice(2);\n\n        prom = promise(function (resolve) {\n          function workerDone(msg) {\n            if (msg.data.callback !== id) {\n              return;\n            }\n\n            delete resolves[id];\n            worker.removeEventListener('message', workerDone);\n\n            prom = null;\n\n            bitmapMapper.clear();\n\n            done();\n            resolve();\n          }\n\n          worker.addEventListener('message', workerDone);\n          execute(options, id);\n\n          resolves[id] = workerDone.bind(null, { data: { callback: id }});\n        });\n\n        return prom;\n      };\n\n      worker.reset = function resetWorker() {\n        worker.postMessage({ reset: true });\n\n        for (var id in resolves) {\n          resolves[id]();\n          delete resolves[id];\n        }\n      };\n    }\n\n    return function () {\n      if (worker) {\n        return worker;\n      }\n\n      if (!isWorker && canUseWorker) {\n        var code = [\n          'var CONFETTI, SIZE = {}, module = {};',\n          '(' + main.toString() + ')(this, module, true, SIZE);',\n          'onmessage = function(msg) {',\n          '  if (msg.data.options) {',\n          '    CONFETTI(msg.data.options).then(function () {',\n          '      if (msg.data.callback) {',\n          '        postMessage({ callback: msg.data.callback });',\n          '      }',\n          '    });',\n          '  } else if (msg.data.reset) {',\n          '    CONFETTI && CONFETTI.reset();',\n          '  } else if (msg.data.resize) {',\n          '    SIZE.width = msg.data.resize.width;',\n          '    SIZE.height = msg.data.resize.height;',\n          '  } else if (msg.data.canvas) {',\n          '    SIZE.width = msg.data.canvas.width;',\n          '    SIZE.height = msg.data.canvas.height;',\n          '    CONFETTI = module.exports.create(msg.data.canvas);',\n          '  }',\n          '}',\n        ].join('\\n');\n        try {\n          worker = new Worker(URL.createObjectURL(new Blob([code])));\n        } catch (e) {\n          // eslint-disable-next-line no-console\n          typeof console !== 'undefined' && typeof console.warn === 'function' ? console.warn('🎊 Could not load worker', e) : null;\n\n          return null;\n        }\n\n        decorate(worker);\n      }\n\n      return worker;\n    };\n  })();\n\n  var defaults = {\n    particleCount: 50,\n    angle: 90,\n    spread: 45,\n    startVelocity: 45,\n    decay: 0.9,\n    gravity: 1,\n    drift: 0,\n    ticks: 200,\n    x: 0.5,\n    y: 0.5,\n    shapes: ['square', 'circle'],\n    zIndex: 100,\n    colors: [\n      '#26ccff',\n      '#a25afd',\n      '#ff5e7e',\n      '#88ff5a',\n      '#fcff42',\n      '#ffa62d',\n      '#ff36ff'\n    ],\n    // probably should be true, but back-compat\n    disableForReducedMotion: false,\n    scalar: 1\n  };\n\n  function convert(val, transform) {\n    return transform ? transform(val) : val;\n  }\n\n  function isOk(val) {\n    return !(val === null || val === undefined);\n  }\n\n  function prop(options, name, transform) {\n    return convert(\n      options && isOk(options[name]) ? options[name] : defaults[name],\n      transform\n    );\n  }\n\n  function onlyPositiveInt(number){\n    return number < 0 ? 0 : Math.floor(number);\n  }\n\n  function randomInt(min, max) {\n    // [min, max)\n    return Math.floor(Math.random() * (max - min)) + min;\n  }\n\n  function toDecimal(str) {\n    return parseInt(str, 16);\n  }\n\n  function colorsToRgb(colors) {\n    return colors.map(hexToRgb);\n  }\n\n  function hexToRgb(str) {\n    var val = String(str).replace(/[^0-9a-f]/gi, '');\n\n    if (val.length < 6) {\n        val = val[0]+val[0]+val[1]+val[1]+val[2]+val[2];\n    }\n\n    return {\n      r: toDecimal(val.substring(0,2)),\n      g: toDecimal(val.substring(2,4)),\n      b: toDecimal(val.substring(4,6))\n    };\n  }\n\n  function getOrigin(options) {\n    var origin = prop(options, 'origin', Object);\n    origin.x = prop(origin, 'x', Number);\n    origin.y = prop(origin, 'y', Number);\n\n    return origin;\n  }\n\n  function setCanvasWindowSize(canvas) {\n    canvas.width = document.documentElement.clientWidth;\n    canvas.height = document.documentElement.clientHeight;\n  }\n\n  function setCanvasRectSize(canvas) {\n    var rect = canvas.getBoundingClientRect();\n    canvas.width = rect.width;\n    canvas.height = rect.height;\n  }\n\n  function getCanvas(zIndex) {\n    var canvas = document.createElement('canvas');\n\n    canvas.style.position = 'fixed';\n    canvas.style.top = '0px';\n    canvas.style.left = '0px';\n    canvas.style.pointerEvents = 'none';\n    canvas.style.zIndex = zIndex;\n\n    return canvas;\n  }\n\n  function ellipse(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {\n    context.save();\n    context.translate(x, y);\n    context.rotate(rotation);\n    context.scale(radiusX, radiusY);\n    context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);\n    context.restore();\n  }\n\n  function randomPhysics(opts) {\n    var radAngle = opts.angle * (Math.PI / 180);\n    var radSpread = opts.spread * (Math.PI / 180);\n\n    return {\n      x: opts.x,\n      y: opts.y,\n      wobble: Math.random() * 10,\n      wobbleSpeed: Math.min(0.11, Math.random() * 0.1 + 0.05),\n      velocity: (opts.startVelocity * 0.5) + (Math.random() * opts.startVelocity),\n      angle2D: -radAngle + ((0.5 * radSpread) - (Math.random() * radSpread)),\n      tiltAngle: (Math.random() * (0.75 - 0.25) + 0.25) * Math.PI,\n      color: opts.color,\n      shape: opts.shape,\n      tick: 0,\n      totalTicks: opts.ticks,\n      decay: opts.decay,\n      drift: opts.drift,\n      random: Math.random() + 2,\n      tiltSin: 0,\n      tiltCos: 0,\n      wobbleX: 0,\n      wobbleY: 0,\n      gravity: opts.gravity * 3,\n      ovalScalar: 0.6,\n      scalar: opts.scalar,\n      flat: opts.flat\n    };\n  }\n\n  function updateFetti(context, fetti) {\n    fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;\n    fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;\n    fetti.velocity *= fetti.decay;\n\n    if (fetti.flat) {\n      fetti.wobble = 0;\n      fetti.wobbleX = fetti.x + (10 * fetti.scalar);\n      fetti.wobbleY = fetti.y + (10 * fetti.scalar);\n\n      fetti.tiltSin = 0;\n      fetti.tiltCos = 0;\n      fetti.random = 1;\n    } else {\n      fetti.wobble += fetti.wobbleSpeed;\n      fetti.wobbleX = fetti.x + ((10 * fetti.scalar) * Math.cos(fetti.wobble));\n      fetti.wobbleY = fetti.y + ((10 * fetti.scalar) * Math.sin(fetti.wobble));\n\n      fetti.tiltAngle += 0.1;\n      fetti.tiltSin = Math.sin(fetti.tiltAngle);\n      fetti.tiltCos = Math.cos(fetti.tiltAngle);\n      fetti.random = Math.random() + 2;\n    }\n\n    var progress = (fetti.tick++) / fetti.totalTicks;\n\n    var x1 = fetti.x + (fetti.random * fetti.tiltCos);\n    var y1 = fetti.y + (fetti.random * fetti.tiltSin);\n    var x2 = fetti.wobbleX + (fetti.random * fetti.tiltCos);\n    var y2 = fetti.wobbleY + (fetti.random * fetti.tiltSin);\n\n    context.fillStyle = 'rgba(' + fetti.color.r + ', ' + fetti.color.g + ', ' + fetti.color.b + ', ' + (1 - progress) + ')';\n\n    context.beginPath();\n\n    if (canUsePaths && fetti.shape.type === 'path' && typeof fetti.shape.path === 'string' && Array.isArray(fetti.shape.matrix)) {\n      context.fill(transformPath2D(\n        fetti.shape.path,\n        fetti.shape.matrix,\n        fetti.x,\n        fetti.y,\n        Math.abs(x2 - x1) * 0.1,\n        Math.abs(y2 - y1) * 0.1,\n        Math.PI / 10 * fetti.wobble\n      ));\n    } else if (fetti.shape.type === 'bitmap') {\n      var rotation = Math.PI / 10 * fetti.wobble;\n      var scaleX = Math.abs(x2 - x1) * 0.1;\n      var scaleY = Math.abs(y2 - y1) * 0.1;\n      var width = fetti.shape.bitmap.width * fetti.scalar;\n      var height = fetti.shape.bitmap.height * fetti.scalar;\n\n      var matrix = new DOMMatrix([\n        Math.cos(rotation) * scaleX,\n        Math.sin(rotation) * scaleX,\n        -Math.sin(rotation) * scaleY,\n        Math.cos(rotation) * scaleY,\n        fetti.x,\n        fetti.y\n      ]);\n\n      // apply the transform matrix from the confetti shape\n      matrix.multiplySelf(new DOMMatrix(fetti.shape.matrix));\n\n      var pattern = context.createPattern(bitmapMapper.transform(fetti.shape.bitmap), 'no-repeat');\n      pattern.setTransform(matrix);\n\n      context.globalAlpha = (1 - progress);\n      context.fillStyle = pattern;\n      context.fillRect(\n        fetti.x - (width / 2),\n        fetti.y - (height / 2),\n        width,\n        height\n      );\n      context.globalAlpha = 1;\n    } else if (fetti.shape === 'circle') {\n      context.ellipse ?\n        context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI) :\n        ellipse(context, fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);\n    } else if (fetti.shape === 'star') {\n      var rot = Math.PI / 2 * 3;\n      var innerRadius = 4 * fetti.scalar;\n      var outerRadius = 8 * fetti.scalar;\n      var x = fetti.x;\n      var y = fetti.y;\n      var spikes = 5;\n      var step = Math.PI / spikes;\n\n      while (spikes--) {\n        x = fetti.x + Math.cos(rot) * outerRadius;\n        y = fetti.y + Math.sin(rot) * outerRadius;\n        context.lineTo(x, y);\n        rot += step;\n\n        x = fetti.x + Math.cos(rot) * innerRadius;\n        y = fetti.y + Math.sin(rot) * innerRadius;\n        context.lineTo(x, y);\n        rot += step;\n      }\n    } else {\n      context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));\n      context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));\n      context.lineTo(Math.floor(x2), Math.floor(y2));\n      context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));\n    }\n\n    context.closePath();\n    context.fill();\n\n    return fetti.tick < fetti.totalTicks;\n  }\n\n  function animate(canvas, fettis, resizer, size, done) {\n    var animatingFettis = fettis.slice();\n    var context = canvas.getContext('2d');\n    var animationFrame;\n    var destroy;\n\n    var prom = promise(function (resolve) {\n      function onDone() {\n        animationFrame = destroy = null;\n\n        context.clearRect(0, 0, size.width, size.height);\n        bitmapMapper.clear();\n\n        done();\n        resolve();\n      }\n\n      function update() {\n        if (isWorker && !(size.width === workerSize.width && size.height === workerSize.height)) {\n          size.width = canvas.width = workerSize.width;\n          size.height = canvas.height = workerSize.height;\n        }\n\n        if (!size.width && !size.height) {\n          resizer(canvas);\n          size.width = canvas.width;\n          size.height = canvas.height;\n        }\n\n        context.clearRect(0, 0, size.width, size.height);\n\n        animatingFettis = animatingFettis.filter(function (fetti) {\n          return updateFetti(context, fetti);\n        });\n\n        if (animatingFettis.length) {\n          animationFrame = raf.frame(update);\n        } else {\n          onDone();\n        }\n      }\n\n      animationFrame = raf.frame(update);\n      destroy = onDone;\n    });\n\n    return {\n      addFettis: function (fettis) {\n        animatingFettis = animatingFettis.concat(fettis);\n\n        return prom;\n      },\n      canvas: canvas,\n      promise: prom,\n      reset: function () {\n        if (animationFrame) {\n          raf.cancel(animationFrame);\n        }\n\n        if (destroy) {\n          destroy();\n        }\n      }\n    };\n  }\n\n  function confettiCannon(canvas, globalOpts) {\n    var isLibCanvas = !canvas;\n    var allowResize = !!prop(globalOpts || {}, 'resize');\n    var hasResizeEventRegistered = false;\n    var globalDisableForReducedMotion = prop(globalOpts, 'disableForReducedMotion', Boolean);\n    var shouldUseWorker = canUseWorker && !!prop(globalOpts || {}, 'useWorker');\n    var worker = shouldUseWorker ? getWorker() : null;\n    var resizer = isLibCanvas ? setCanvasWindowSize : setCanvasRectSize;\n    var initialized = (canvas && worker) ? !!canvas.__confetti_initialized : false;\n    var preferLessMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion)').matches;\n    var animationObj;\n\n    function fireLocal(options, size, done) {\n      var particleCount = prop(options, 'particleCount', onlyPositiveInt);\n      var angle = prop(options, 'angle', Number);\n      var spread = prop(options, 'spread', Number);\n      var startVelocity = prop(options, 'startVelocity', Number);\n      var decay = prop(options, 'decay', Number);\n      var gravity = prop(options, 'gravity', Number);\n      var drift = prop(options, 'drift', Number);\n      var colors = prop(options, 'colors', colorsToRgb);\n      var ticks = prop(options, 'ticks', Number);\n      var shapes = prop(options, 'shapes');\n      var scalar = prop(options, 'scalar');\n      var flat = !!prop(options, 'flat');\n      var origin = getOrigin(options);\n\n      var temp = particleCount;\n      var fettis = [];\n\n      var startX = canvas.width * origin.x;\n      var startY = canvas.height * origin.y;\n\n      while (temp--) {\n        fettis.push(\n          randomPhysics({\n            x: startX,\n            y: startY,\n            angle: angle,\n            spread: spread,\n            startVelocity: startVelocity,\n            color: colors[temp % colors.length],\n            shape: shapes[randomInt(0, shapes.length)],\n            ticks: ticks,\n            decay: decay,\n            gravity: gravity,\n            drift: drift,\n            scalar: scalar,\n            flat: flat\n          })\n        );\n      }\n\n      // if we have a previous canvas already animating,\n      // add to it\n      if (animationObj) {\n        return animationObj.addFettis(fettis);\n      }\n\n      animationObj = animate(canvas, fettis, resizer, size , done);\n\n      return animationObj.promise;\n    }\n\n    function fire(options) {\n      var disableForReducedMotion = globalDisableForReducedMotion || prop(options, 'disableForReducedMotion', Boolean);\n      var zIndex = prop(options, 'zIndex', Number);\n\n      if (disableForReducedMotion && preferLessMotion) {\n        return promise(function (resolve) {\n          resolve();\n        });\n      }\n\n      if (isLibCanvas && animationObj) {\n        // use existing canvas from in-progress animation\n        canvas = animationObj.canvas;\n      } else if (isLibCanvas && !canvas) {\n        // create and initialize a new canvas\n        canvas = getCanvas(zIndex);\n        document.body.appendChild(canvas);\n      }\n\n      if (allowResize && !initialized) {\n        // initialize the size of a user-supplied canvas\n        resizer(canvas);\n      }\n\n      var size = {\n        width: canvas.width,\n        height: canvas.height\n      };\n\n      if (worker && !initialized) {\n        worker.init(canvas);\n      }\n\n      initialized = true;\n\n      if (worker) {\n        canvas.__confetti_initialized = true;\n      }\n\n      function onResize() {\n        if (worker) {\n          // TODO this really shouldn't be immediate, because it is expensive\n          var obj = {\n            getBoundingClientRect: function () {\n              if (!isLibCanvas) {\n                return canvas.getBoundingClientRect();\n              }\n            }\n          };\n\n          resizer(obj);\n\n          worker.postMessage({\n            resize: {\n              width: obj.width,\n              height: obj.height\n            }\n          });\n          return;\n        }\n\n        // don't actually query the size here, since this\n        // can execute frequently and rapidly\n        size.width = size.height = null;\n      }\n\n      function done() {\n        animationObj = null;\n\n        if (allowResize) {\n          hasResizeEventRegistered = false;\n          global.removeEventListener('resize', onResize);\n        }\n\n        if (isLibCanvas && canvas) {\n          if (document.body.contains(canvas)) {\n            document.body.removeChild(canvas);\n          }\n          canvas = null;\n          initialized = false;\n        }\n      }\n\n      if (allowResize && !hasResizeEventRegistered) {\n        hasResizeEventRegistered = true;\n        global.addEventListener('resize', onResize, false);\n      }\n\n      if (worker) {\n        return worker.fire(options, size, done);\n      }\n\n      return fireLocal(options, size, done);\n    }\n\n    fire.reset = function () {\n      if (worker) {\n        worker.reset();\n      }\n\n      if (animationObj) {\n        animationObj.reset();\n      }\n    };\n\n    return fire;\n  }\n\n  // Make default export lazy to defer worker creation until called.\n  var defaultFire;\n  function getDefaultFire() {\n    if (!defaultFire) {\n      defaultFire = confettiCannon(null, { useWorker: true, resize: true });\n    }\n    return defaultFire;\n  }\n\n  function transformPath2D(pathString, pathMatrix, x, y, scaleX, scaleY, rotation) {\n    var path2d = new Path2D(pathString);\n\n    var t1 = new Path2D();\n    t1.addPath(path2d, new DOMMatrix(pathMatrix));\n\n    var t2 = new Path2D();\n    // see https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix/DOMMatrix\n    t2.addPath(t1, new DOMMatrix([\n      Math.cos(rotation) * scaleX,\n      Math.sin(rotation) * scaleX,\n      -Math.sin(rotation) * scaleY,\n      Math.cos(rotation) * scaleY,\n      x,\n      y\n    ]));\n\n    return t2;\n  }\n\n  function shapeFromPath(pathData) {\n    if (!canUsePaths) {\n      throw new Error('path confetti are not supported in this browser');\n    }\n\n    var path, matrix;\n\n    if (typeof pathData === 'string') {\n      path = pathData;\n    } else {\n      path = pathData.path;\n      matrix = pathData.matrix;\n    }\n\n    var path2d = new Path2D(path);\n    var tempCanvas = document.createElement('canvas');\n    var tempCtx = tempCanvas.getContext('2d');\n\n    if (!matrix) {\n      // attempt to figure out the width of the path, up to 1000x1000\n      var maxSize = 1000;\n      var minX = maxSize;\n      var minY = maxSize;\n      var maxX = 0;\n      var maxY = 0;\n      var width, height;\n\n      // do some line skipping... this is faster than checking\n      // every pixel and will be mostly still correct\n      for (var x = 0; x < maxSize; x += 2) {\n        for (var y = 0; y < maxSize; y += 2) {\n          if (tempCtx.isPointInPath(path2d, x, y, 'nonzero')) {\n            minX = Math.min(minX, x);\n            minY = Math.min(minY, y);\n            maxX = Math.max(maxX, x);\n            maxY = Math.max(maxY, y);\n          }\n        }\n      }\n\n      width = maxX - minX;\n      height = maxY - minY;\n\n      var maxDesiredSize = 10;\n      var scale = Math.min(maxDesiredSize/width, maxDesiredSize/height);\n\n      matrix = [\n        scale, 0, 0, scale,\n        -Math.round((width/2) + minX) * scale,\n        -Math.round((height/2) + minY) * scale\n      ];\n    }\n\n    return {\n      type: 'path',\n      path: path,\n      matrix: matrix\n    };\n  }\n\n  function shapeFromText(textData) {\n    var text,\n        scalar = 1,\n        color = '#000000',\n        // see https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/\n        fontFamily = '\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\", \"EmojiOne Color\", \"Android Emoji\", \"Twemoji Mozilla\", \"system emoji\", sans-serif';\n\n    if (typeof textData === 'string') {\n      text = textData;\n    } else {\n      text = textData.text;\n      scalar = 'scalar' in textData ? textData.scalar : scalar;\n      fontFamily = 'fontFamily' in textData ? textData.fontFamily : fontFamily;\n      color = 'color' in textData ? textData.color : color;\n    }\n\n    // all other confetti are 10 pixels,\n    // so this pixel size is the de-facto 100% scale confetti\n    var fontSize = 10 * scalar;\n    var font = '' + fontSize + 'px ' + fontFamily;\n\n    var canvas = new OffscreenCanvas(fontSize, fontSize);\n    var ctx = canvas.getContext('2d');\n\n    ctx.font = font;\n    var size = ctx.measureText(text);\n    var width = Math.ceil(size.actualBoundingBoxRight + size.actualBoundingBoxLeft);\n    var height = Math.ceil(size.actualBoundingBoxAscent + size.actualBoundingBoxDescent);\n\n    var padding = 2;\n    var x = size.actualBoundingBoxLeft + padding;\n    var y = size.actualBoundingBoxAscent + padding;\n    width += padding + padding;\n    height += padding + padding;\n\n    canvas = new OffscreenCanvas(width, height);\n    ctx = canvas.getContext('2d');\n    ctx.font = font;\n    ctx.fillStyle = color;\n\n    ctx.fillText(text, x, y);\n\n    var scale = 1 / scalar;\n\n    return {\n      type: 'bitmap',\n      // TODO these probably need to be transfered for workers\n      bitmap: canvas.transferToImageBitmap(),\n      matrix: [scale, 0, 0, scale, -width * scale / 2, -height * scale / 2]\n    };\n  }\n\n  module.exports = function() {\n    return getDefaultFire().apply(this, arguments);\n  };\n  module.exports.reset = function() {\n    getDefaultFire().reset();\n  };\n  module.exports.create = confettiCannon;\n  module.exports.shapeFromPath = shapeFromPath;\n  module.exports.shapeFromText = shapeFromText;\n}((function () {\n  if (typeof window !== 'undefined') {\n    return window;\n  }\n\n  if (typeof self !== 'undefined') {\n    return self;\n  }\n\n  return this || {};\n})(), module, false));\n"
  },
  {
    "path": "test/.eslintrc.yml",
    "content": "extends:\n  - plugin:ava/recommended\nenv:\n  es6: true\n  node: true\n  browser: false\nparser: babel-eslint\nparserOptions:\n  sourceType: module\n  ecmaVersion: 6\n  ecmaFeatures:\n    modules: true\nplugins:\n  - ava\n"
  },
  {
    "path": "test/index.test.js",
    "content": "import fs from 'fs';\nimport http from 'http';\nimport path from 'path';\nimport { promisify } from 'util';\n\nimport test from 'ava';\nimport puppeteer from 'puppeteer';\nimport send from 'send';\nimport root from 'rootrequire';\nimport jimp from 'jimp';\n\nconst PORT = 9999;\nconst width = 500;\nconst height = 500;\n\nconst args = ['--disable-background-timer-throttling'];\n\n// Docker-based CIs need this disabled\n// https://github.com/Quramy/puppeteer-example/blob/c28a5aa52fe3968c2d6cfca362ec28c36963be26/README.md#with-docker-based-ci-services\nif (process.env.CI) {\n  args.push('--no-sandbox', '--disable-setuid-sandbox');\n}\n\nconst headless = (process.env.CI || !('CONFETTI_SHOW' in process.env)) ? 'new' : false;\n\nconst mkdir = async (dir) => {\n  return promisify(fs.mkdir)(dir)\n    .then(() => Promise.resolve())\n    .catch(err => {\n      if (err.code === 'EEXIST') {\n        return Promise.resolve();\n      }\n\n      return Promise.reject(err);\n    });\n};\n\nconst testServer = (function startServer() {\n  let server;\n\n  return function () {\n    return new Promise((resolve) => {\n      if (server) {\n        return resolve(server);\n      }\n\n      server = http.createServer(function (req, res) {\n        var file = path.resolve(root, req.url.slice(1));\n        send(req, file).pipe(res);\n      }).listen(PORT, () => {\n        resolve(server);\n      });\n    });\n  };\n}());\n\nconst testBrowser = (() => {\n  let browser;\n\n  return function () {\n    if (browser) {\n      return Promise.resolve(browser);\n    }\n\n    return puppeteer.launch({\n      headless,\n      args\n    }).then(thisBrowser => {\n      browser = thisBrowser;\n      return Promise.resolve(browser);\n    });\n  };\n})();\n\nconst testPage = async () => {\n  const browser = await testBrowser();\n  const page = await browser.newPage();\n  await page.setViewport({ width, height });\n\n  // eslint-disable-next-line no-console\n  page.on('pageerror', err => console.error(err));\n  // eslint-disable-next-line no-console\n  page.on('console', msg => console.log(msg.text()));\n\n  return page;\n};\n\nconst fixturePage = async (urlPath = 'fixtures/page.html') => {\n  const page = await testPage();\n  await page.goto(`http://localhost:${PORT}/${urlPath}`);\n\n  return page;\n};\n\n// eslint-disable-next-line no-unused-vars\nconst sleep = (time) => {\n  return new Promise(resolve => {\n    setTimeout(() => resolve(), time);\n  });\n};\n\nconst createBuffer = (data, format) => {\n  try {\n    return Buffer.from(data, format);\n  } catch(e) {\n    return new Buffer(data, format);\n  }\n};\n\nfunction serializeConfettiOptions(opts) {\n  let serializedOpts = opts ? JSON.stringify(opts) : '';\n\n  if (opts && opts.shapes && Array.isArray(opts.shapes)) {\n    const { shapes, ...rest } = opts;\n\n    const serializedShapes = shapes.map(shape => {\n      if (typeof shape === 'function') {\n        return `(${shape.toString()})()`;\n      }\n\n      return JSON.stringify(shape);\n    });\n\n    serializedOpts = `{\n      ...${JSON.stringify(rest)},\n      shapes: [${serializedShapes.join(', ')}]\n    }`;\n  }\n\n  return serializedOpts;\n}\n\nfunction confetti(opts, wait = false, funcName = 'confetti') {\n  const serializedOpts = serializeConfettiOptions(opts);\n\n  return `\n${wait ? '' : `${funcName}.Promise = null;`}\n${funcName}(${serializedOpts});\n`;\n}\n\nconst base64ToBuffer = base64png => createBuffer(base64png.replace(/data:image\\/png;base64,/, ''), 'base64');\n\nasync function confettiImage(page, opts = {}, funcName = 'confetti') {\n  const serializedOpts = serializeConfettiOptions(opts);\n  const base64png = await page.evaluate(`\n    ${funcName}(${serializedOpts});\n    new Promise(function (resolve, reject) {\n      setTimeout(function () {\n        var canvas = document.querySelector('canvas');\n        return resolve(canvas.toDataURL('image/png'));\n      }, 200);\n    });\n  `);\n\n  return base64ToBuffer(base64png);\n}\n\nfunction hex(n) {\n  const pad = (n) => {\n    while (n.length < 2) {\n      n = '0'+n;\n    }\n    return n;\n  };\n\n  return pad(n.toString(16));\n}\n\nconst getImageBuffer = async (image) => {\n  return await promisify(image.getBuffer.bind(image))(jimp.MIME_PNG);\n};\n\nconst readImage = async (buffer) => {\n  return Buffer.isBuffer(buffer) ? await jimp.read(buffer) : buffer;\n};\n\nconst uniqueColors = async (buffer) => {\n  const image = await readImage(buffer);\n  const pixels = new Set();\n\n  image.scan(0, 0, image.bitmap.width, image.bitmap.height, (x, y, idx) => {\n    const r = image.bitmap.data[idx + 0];\n    const g = image.bitmap.data[idx + 1];\n    const b = image.bitmap.data[idx + 2];\n\n    pixels.add(`#${hex(r)}${hex(g)}${hex(b)}`);\n  });\n\n  return Array.from(pixels).sort();\n};\n\nconst uniqueColorsBySide = async (buffer) => {\n  const image = await readImage(buffer);\n\n  const { width, height } = image.bitmap;\n  const leftImage = image.clone().crop(0, 0, width / 2, height);\n  const rightImage = image.clone().crop(width / 2, 0, width/2, height);\n\n  return {\n    left: await uniqueColors(leftImage),\n    right: await uniqueColors(rightImage)\n  };\n};\n\nconst totalPixels = async(buffer) => {\n  const image = await readImage(buffer);\n  let pixels = 0;\n  image.scan(0, 0, image.bitmap.width, image.bitmap.height, (x, y, idx) => {\n    const r = image.bitmap.data[idx + 0];\n    const g = image.bitmap.data[idx + 1];\n    const b = image.bitmap.data[idx + 2];\n\n    if (r === 255 && g === 255 && b === 255) { return; }\n\n    pixels++;\n  });\n  return pixels;\n};\n\nconst removeOpacity = async (buffer) => {\n  const image = await readImage(buffer);\n  image.rgba(false).background(0xFFFFFFFF);\n  var opaqueBuffer = await promisify(image.getBuffer.bind(image))(jimp.MIME_PNG);\n\n  return await jimp.read(opaqueBuffer);\n};\n\nconst reduceImg = async (buffer, opaque = true) => {\n  const image = opaque ?\n    await removeOpacity(buffer) :\n    await readImage(buffer);\n\n  // basically dialate the crap out of everything\n  image.blur(2);\n  image.posterize(1);\n\n  return image;\n};\n\nconst emptyImg = function (width, height) {\n  return new Promise((resolve, reject) => {\n    new jimp(width, height, (err, img) => {\n      if (err) {\n        return reject(err);\n      }\n\n      resolve(img);\n    });\n  });\n};\n\ntest.before(async () => {\n  await mkdir('./shots');\n  await testServer();\n  await testBrowser();\n});\n\ntest.after(async () => {\n  const browser = await testBrowser();\n  await browser.close();\n\n  const server = await testServer();\n  await new Promise(resolve => {\n    server.close(() => resolve());\n  });\n});\n\n// hack to get the status of a test, until AVA implements this\n// https://github.com/avajs/ava/issues/840\ntest.beforeEach((t) => {\n  t.context.page = null;\n  t.context.passing = false;\n});\ntest.afterEach((t) => {\n  t.context.passing = true;\n});\n\ntest.afterEach.always(async t => {\n  if (t.context.page) {\n    await t.context.page.close();\n  }\n\n  if (t.context.passing && !process.env['CONFETTI_SHOW']) {\n    return;\n  }\n\n  // this is allowed, but still needs the eslint plugin to be updated\n  // https://github.com/avajs/eslint-plugin-ava/issues/176\n  // eslint-disable-next-line ava/use-t-well\n  const name = t.title.replace(/^afterEach\\.always hook for /, '');\n\n  // save the raw buffer image, if one is present\n  if (t.context.buffer) {\n    await promisify(fs.writeFile)(`shots/${name}.original.png`, t.context.buffer);\n  }\n\n  // save the simplified/tested image, if one is present\n  if (t.context.image) {\n    await promisify(t.context.image.write.bind(t.context.image))(`shots/${name}.reduced.png`);\n  }\n});\n\n/*\n * Image-based tests\n */\n\ntest('shoots default confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page);\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.true(pixels.length >= 7);\n  t.true(pixels.length <= 8);\n});\n\ntest('shoots red confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000']\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#ff0000', '#ffffff']);\n});\n\ntest('shoots blue confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff']\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#0000ff', '#ffffff']);\n});\n\ntest('shoots circle confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    shapes: ['circle']\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#0000ff', '#ffffff']);\n});\n\ntest('shoots star confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    shapes: ['star']\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#0000ff', '#ffffff']);\n});\n\ntest('shoots default scaled confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    shapes: ['circle'],\n    particleCount: 1,\n    startVelocity: 0,\n    gravity: 0,\n    flat: true\n  });\n  t.context.image = await removeOpacity(t.context.buffer);\n\n  const pixels = await totalPixels(t.context.image);\n\n  const expected = 124;\n  t.true(pixels > expected * .99 && pixels < expected * 1.01, `${pixels}±1% ≠ ${expected}`);\n});\n\ntest('shoots larger scaled confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    shapes: ['circle'],\n    scalar: 10,\n    particleCount: 1,\n    startVelocity: 0,\n    gravity: 0,\n    flat: true\n  });\n  t.context.image = await removeOpacity(t.context.buffer);\n\n  const pixels = await totalPixels(t.context.image);\n\n  const expected = 11476;\n  t.true(pixels > expected * .99 && pixels < expected * 1.01, `${pixels} ± 1% ≠ ${expected}`);\n});\n\ntest('shoots confetti to the left', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    particleCount: 100,\n    angle: 180,\n    startVelocity: 20\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColorsBySide(t.context.image);\n\n  // left side has stuff on it\n  t.deepEqual(pixels.left, ['#0000ff', '#ffffff']);\n  // right side is all white\n  t.deepEqual(pixels.right, ['#ffffff']);\n});\n\ntest('shoots confetti to the right', async t => {\n  const page = t.context.page = await fixturePage();\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#0000ff'],\n    particleCount: 100,\n    angle: 0,\n    startVelocity: 20\n  });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColorsBySide(t.context.image);\n\n  // right side has stuff on it\n  t.deepEqual(pixels.right, ['#0000ff', '#ffffff']);\n  // left side is all white\n  t.deepEqual(pixels.left, ['#ffffff']);\n});\n\ntest('shoots flat confetti', async t => {\n  const page = t.context.page = await fixturePage();\n\n  // these parameters should create an image\n  // that is the same every time\n  t.context.buffer = await confettiImage(page, {\n    startVelocity: 0,\n    gravity: 0,\n    scalar: 20,\n    flat: 1,\n    shapes: ['circle'],\n    colors: ['ff0000']\n  });\n  t.context.image = await readImage(t.context.buffer);\n\n  t.is(t.context.image.hash(), '8E0802208w0');\n});\n\n/*\n * Operational tests\n */\n\ntest('shoots confetti repeatedly using requestAnimationFrame', async t => {\n  const page = t.context.page = await fixturePage();\n  const time = 6 * 1000;\n\n  let opts = {\n    colors: ['#0000ff'],\n    origin: { y: 1 },\n    count: 1\n  };\n\n  // continuously animate more and more confetti\n  // for 10 seconds... that should be longer than\n  // this test... we won't wait for it anyway\n  page.evaluate(`\n    var opts = ${JSON.stringify(opts)};\n    var end = Date.now() + (${time});\n\n    (function frame() {\n      confetti(opts);\n\n      if (Date.now() < end) {\n        requestAnimationFrame(frame);\n      }\n    }());\n  `);\n\n  await sleep(time / 4);\n  const buff1 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff2 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff3 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff4 = await page.screenshot({ type: 'png' });\n\n  const img1 = await readImage(buff1);\n  const img2 = await readImage(buff2);\n  const img3 = await readImage(buff3);\n  const img4 = await readImage(buff4);\n  const { width, height } = img1.bitmap;\n\n  const comp = await emptyImg(width * 4, height);\n  await comp.composite(img1, 0, 0);\n  await comp.composite(img2, width, 0);\n  await comp.composite(img3, width * 2, 0);\n  await comp.composite(img4, width * 3, 0);\n\n  t.context.buffer = await getImageBuffer(comp);\n  t.context.image = await reduceImg(t.context.buffer);\n\n  t.deepEqual(await uniqueColors(await reduceImg(img1)), ['#0000ff', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img2)), ['#0000ff', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img3)), ['#0000ff', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img4)), ['#0000ff', '#ffffff']);\n});\n\ntest('uses promises when available', async t => {\n  const page = t.context.page = await fixturePage();\n\n  await page.evaluate(confetti({}, true));\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  // make sure that all confetti have disappeared\n  t.deepEqual(pixels, ['#ffffff']);\n});\n\ntest('removes the canvas when done', async t => {\n  const page = t.context.page = await fixturePage();\n\n  function hasCanvas() {\n    return page.evaluate(`!!document.querySelector('canvas')`);\n  }\n\n  // make sure there is no canvas before executing confetti\n  t.is(await hasCanvas(), false);\n\n  const promise = page.evaluate(confetti({}, true));\n\n  // confetti is running, make sure a canvas exists\n  t.is(await hasCanvas(), true);\n\n  await promise;\n\n  // confetti is done, canvas should be gone now\n  t.is(await hasCanvas(), false);\n});\n\ntest('handles window resizes', async t => {\n  const time = 50;\n\n  const page = t.context.page = await fixturePage();\n  await page.setViewport({ width: width / 2, height });\n\n  let opts = {\n    colors: ['#0000ff'],\n    origin: { x: 1, y: 0 },\n    angle: 0,\n    startVelocity: 0,\n    particleCount: 2\n  };\n\n  // continuously animate more and more confetti\n  // for 10 seconds... that should be longer than\n  // this test... we won't wait for it anyway\n  page.evaluate(`\n    var opts = ${JSON.stringify(opts)};\n    var end = Date.now() + (10 * 1000);\n\n    var promise = confetti(opts);\n\n    var interval = setInterval(function() {\n        if (Date.now() > end) {\n            return clearInterval(interval);\n        }\n\n        confetti(opts);\n    }, ${time});\n  `);\n\n  await sleep(time * 4);\n  await page.setViewport({ width, height });\n  await sleep(time * 4);\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  // chop this image into thirds\n  let widthThird = Math.floor(width / 3);\n  let first = t.context.image.clone().crop(widthThird * 0, 0, widthThird, height);\n  let second = t.context.image.clone().crop(widthThird * 1, 0, widthThird, height);\n  let third = t.context.image.clone().crop(widthThird * 2, 0, widthThird, height);\n\n  // the first will be white, the second and third will have confetti in them\n  t.deepEqual(await uniqueColors(first), ['#ffffff']);\n  t.deepEqual(await uniqueColors(second), ['#0000ff', '#ffffff']);\n  t.deepEqual(await uniqueColors(third), ['#0000ff', '#ffffff']);\n});\n\ntest('stops and removes canvas immediately when `reset` is called', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const promise = page.evaluate(`new Promise((resolve, reject) => {\n    const results = [];\n    results.push(!!document.querySelector('canvas'));\n    confetti().then(() => {\n      results.push('done');\n    });\n    results.push(!!document.querySelector('canvas'));\n    confetti.reset();\n    results.push(!!document.querySelector('canvas'));\n    resolve(results);\n  })`);\n\n  const results = await promise;\n\n  t.deepEqual(results, [false, true, false, 'done']);\n});\n\n/*\n * Shape from path\n */\ntest('[paths] `shapeFromPath` creates an object with a path and transform matrix', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const result = await page.evaluate(`\n    confetti.shapeFromPath('M0 0 L10 0 L10 10 L0 10z');\n  `);\n\n  t.deepEqual(result, {\n    type: 'path',\n    path: 'M0 0 L10 0 L10 10 L0 10z',\n    matrix: [ 1, 0, 0, 1, -5, -5 ]\n  });\n});\n\ntest('[paths] `shapeFromPath` crops the shape and centers in the middle of the actual path object', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const result = await page.evaluate(`\n    confetti.shapeFromPath('M100 100 L110 100 L110 110 L100 110z');\n  `);\n\n  t.deepEqual(result, {\n    type: 'path',\n    path: 'M100 100 L110 100 L110 110 L100 110z',\n    matrix: [ 1, 0, 0, 1, -105, -105 ]\n  });\n});\n\ntest('[paths] shoots confetti of a custom shape', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const shape = await page.evaluate(`\n    confetti.shapeFromPath('M0 10 L5 0 L10 10z');\n  `);\n\n  // these parameters should create an image\n  // that is the same every time\n  t.context.buffer = await confettiImage(page, {\n    startVelocity: 0,\n    gravity: 0,\n    scalar: 20,\n    flat: 1,\n    shapes: [shape],\n    colors: ['ff0000']\n  });\n  t.context.image = await readImage(t.context.buffer);\n\n  t.is(t.context.image.hash(), '9I0p03d03c0');\n});\n\n/*\n * Shape from text\n */\n\nconst loadFont = async page => {\n  // Noto Color Emoji\n  const url = 'https://fonts.gstatic.com/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2';\n  const name = 'Web Font';\n\n  await page.evaluate(`\n    Promise.resolve().then(async () => {\n      const fontFile = new FontFace(\n        \"${name}\",\n        \"url(${url})\",\n      );\n\n      document.fonts.add(fontFile);\n\n      await fontFile.load();\n    });\n  `, );\n\n  return name;\n};\n\nconst shapeFromTextImage = async (page, args) => {\n  const { base64png, ...shape } = await page.evaluate(`\n    Promise.resolve().then(async () => {\n      const { bitmap, ...shape } = confetti.shapeFromText(${JSON.stringify(args)});\n\n      const canvas = document.createElement('canvas');\n      canvas.width = bitmap.width;\n      canvas.height = bitmap.height;\n      const ctx = canvas.getContext('2d');\n      ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);\n\n      return {\n        ...shape,\n        base64png: canvas.toDataURL('image/png')\n      };\n    });\n  `);\n\n  return {\n    ...shape,\n    buffer: base64ToBuffer(base64png)\n  };\n};\n\ntest('[text] shapeFromText renders an emoji', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const fontFace = await loadFont(page);\n\n  const { buffer, ...shape } = await shapeFromTextImage(page, { text: '😀', fontFamily: `\"${fontFace}\"`, scalar: 10 });\n\n  t.context.buffer = buffer;\n  t.context.image = await readImage(buffer);\n\n  t.deepEqual({\n    hash: t.context.image.hash(),\n    ...shape\n  }, {\n    type: 'bitmap',\n    matrix: [ 0.1, 0, 0, 0.1, -5.7, -5.550000000000001 ],\n    hash: 'c4y5z8b83AC'\n  });\n});\n\ntest('[text] shapeFromText works with just a string parameter', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const shape = await page.evaluate(`\n    confetti.shapeFromText(\"🍍\");\n  `);\n\n  t.deepEqual(Object.keys(shape).sort(), ['type', 'bitmap', 'matrix'].sort());\n  // the actual contents will differ from OS to OS, so just validate\n  // the shape has some expected properties\n  t.is(shape.type, 'bitmap');\n  t.is(Array.isArray(shape.matrix), true);\n  t.is(shape.matrix.length, 6);\n});\n\ntest('[text] shapeFromText renders black text by default', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const { buffer } = await shapeFromTextImage(page, { text: 'pie', scalar: 3 });\n\n  t.context.buffer = buffer;\n  t.context.image = await reduceImg(buffer);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#000000', '#ffffff']);\n});\n\ntest('[text] shapeFromText can optionally render text in a requested color', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const { buffer } = await shapeFromTextImage(page, { text: 'pie', color: '#00ff00', scalar: 3 });\n\n  t.context.buffer = buffer;\n  t.context.image = await reduceImg(buffer);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#00ff00', '#ffffff']);\n});\n\n// this test renders a black canvas in a headless browser\n// but works fine when it is not headless\n// eslint-disable-next-line ava/no-skip-test\ntest('[text] shoots confetti of an emoji shape', async t => {\n  const page = t.context.page = await fixturePage();\n\n  const fontFace = await loadFont(page);\n  await page.evaluate(`window.__fontFamily = '\"${fontFace}\"'`);\n\n  // these parameters should create an image\n  // that is the same every time\n  t.context.buffer = await confettiImage(page, {\n    startVelocity: 0,\n    gravity: 0,\n    scalar: 10,\n    flat: 1,\n    ticks: 1000,\n    // eslint-disable-next-line no-undef\n    shapes: [() => confetti.shapeFromText({ text: '😀', fontFamily: __fontFamily, scalar: 10 })]\n  });\n  t.context.image = await readImage(t.context.buffer);\n\n  t.is(t.context.image.hash(), 'cPpcSrcCjdC');\n});\n\n/*\n * Custom canvas\n */\n\nconst injectCanvas = async (page, opts = {}, createName = 'confetti.create') => {\n  const allowResize = 'allowResize' in opts ? opts.allowResize : true;\n  const useWorker = 'useWorker' in opts ? opts.useWorker : false;\n\n  await page.evaluate(`\n    var canvas = document.createElement('canvas');\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n\n    document.body.appendChild(canvas);\n\n    window.myConfetti = ${createName}(canvas, {\n      resize: ${!!allowResize},\n      useWorker: ${!!useWorker}\n    });\n  `);\n};\n\nconst getCanvasSize = async (page) => {\n  return await page.evaluate(`\n    var canvas = document.querySelector('canvas');\n    var size = { width: canvas.width, height: canvas.height };\n    Promise.resolve(size);\n  `);\n};\n\ntest('[custom canvas] can create instances of confetti in separate canvas', async t => {\n  const page = t.context.page = await fixturePage();\n  await injectCanvas(page);\n\n  const beforeSize = await getCanvasSize(page);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000']\n  }, 'myConfetti');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const afterSize = await getCanvasSize(page);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ffffff']);\n  t.notDeepEqual(beforeSize, afterSize);\n});\n\ntest('[custom canvas] can use a custom canvas without resizing', async t => {\n  const page = t.context.page = await fixturePage();\n  await injectCanvas(page, { allowResize: false });\n\n  const beforeSize = await getCanvasSize(page);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000'],\n    startVelocity: 2,\n    spread: 360,\n    origin: { y: 0 }\n  }, 'myConfetti');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const afterSize = await getCanvasSize(page);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ffffff']);\n  t.deepEqual(beforeSize, afterSize);\n});\n\nconst resizeTest = async (t, createOpts, createName = 'confetti.create') => {\n  const time = 50;\n\n  const page = t.context.page = await fixturePage();\n  await page.setViewport({ width: width / 2, height });\n\n  let fireOpts = {\n    colors: ['#0000ff'],\n    origin: { x: 1, y: 0 },\n    angle: 0,\n    startVelocity: 0,\n    particleCount: 2\n  };\n\n  // continuously animate more and more confetti\n  // for 10 seconds... that should be longer than\n  // this test... we won't wait for it anyway\n  page.evaluate(`\n    var canvas = document.createElement('canvas');\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n\n    document.body.appendChild(canvas);\n\n    var myConfetti = ${createName}(canvas, ${JSON.stringify(createOpts)});\n\n    var opts = ${JSON.stringify(fireOpts)};\n    var end = Date.now() + (10 * 1000);\n\n    var promise = myConfetti(opts);\n\n    var interval = setInterval(function() {\n      if (Date.now() > end) {\n        return clearInterval(interval);\n      }\n\n      myConfetti(opts);\n    }, ${time});\n  `);\n\n  await sleep(time * 4);\n  await page.setViewport({ width, height });\n  await sleep(time * 4);\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  // chop this image into thirds\n  let widthThird = Math.floor(width / 3);\n  let first = t.context.image.clone().crop(widthThird * 0, 0, widthThird, height);\n  let second = t.context.image.clone().crop(widthThird * 1, 0, widthThird, height);\n  let third = t.context.image.clone().crop(widthThird * 2, 0, widthThird, height);\n\n  // the first will be white, the second and third will have confetti in them\n  t.deepEqual(await uniqueColors(first), ['#ffffff']);\n  t.deepEqual(await uniqueColors(second), ['#0000ff', '#ffffff']);\n  t.deepEqual(await uniqueColors(third), ['#0000ff', '#ffffff']);\n};\n\ntest('[custom canvas] resizes the custom canvas when the window resizes', async t => {\n  await resizeTest(t, {\n    resize: true\n  });\n});\n\ntest('[custom canvas] resizes the custom canvas when the window resizes and a worker is used', async t => {\n  await resizeTest(t, {\n    resize: true,\n    useWorker: true\n  });\n});\n\ntest('[custom canvas] can use a custom canvas with workers and resize it', async t => {\n  const page = t.context.page = await fixturePage();\n  await injectCanvas(page, {\n    allowResize: true,\n    useWorker: true\n  });\n\n  const beforeSize = await getCanvasSize(page);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000']\n  }, 'myConfetti');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const afterSize = await getCanvasSize(page);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ffffff']);\n  t.notDeepEqual(beforeSize, afterSize);\n});\n\ntest('[custom canvas] shoots confetti repeatedly in defaut and custom canvas using requestAnimationFrame', async t => {\n  const page = t.context.page = await fixturePage();\n  await injectCanvas(page);\n  const time = 6 * 1000;\n\n  let regular = {\n    colors: ['#0000ff'],\n    origin: { x: 0.2, y: 1 },\n    count: 1,\n    spread: 10\n  };\n  let custom = {\n    colors: ['#ff0000'],\n    origin: { x: 0.8, y: 1 },\n    count: 1,\n    spread: 10\n  };\n\n  // continuously animate more and more confetti\n  // for 10 seconds... that should be longer than\n  // this test... we won't wait for it anyway\n  page.evaluate(`\n    var regular = ${JSON.stringify(regular)};\n    var custom = ${JSON.stringify(custom)};\n    var end = Date.now() + (${time});\n\n    (function frame() {\n      confetti(regular);\n      myConfetti(custom);\n\n      if (Date.now() < end) {\n        requestAnimationFrame(frame);\n      }\n    }());\n  `);\n\n  await sleep(time / 4);\n  const buff1 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff2 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff3 = await page.screenshot({ type: 'png' });\n  await sleep(time / 4);\n  const buff4 = await page.screenshot({ type: 'png' });\n\n  const img1 = await readImage(buff1);\n  const img2 = await readImage(buff2);\n  const img3 = await readImage(buff3);\n  const img4 = await readImage(buff4);\n  const { width, height } = img1.bitmap;\n\n  const comp = await emptyImg(width * 4, height);\n  await comp.composite(img1, 0, 0);\n  await comp.composite(img2, width, 0);\n  await comp.composite(img3, width * 2, 0);\n  await comp.composite(img4, width * 3, 0);\n\n  t.context.buffer = await getImageBuffer(comp);\n  t.context.image = await reduceImg(t.context.buffer);\n\n  t.deepEqual(await uniqueColors(await reduceImg(img1)), ['#0000ff', '#ff0000', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img2)), ['#0000ff', '#ff0000', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img3)), ['#0000ff', '#ff0000', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img4)), ['#0000ff', '#ff0000', '#ffffff']);\n});\n\ntest('[custom canvas] can initialize the same canvas multiple times when using a worker', async t => {\n  const page = t.context.page = await fixturePage();\n  await page.evaluate(`\n    var canvas = document.createElement('canvas');\n    canvas.id = 'testcanvas';\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n\n    document.body.appendChild(canvas);\n  `);\n\n  await page.evaluate(`\n    var canvas = document.querySelector('#testcanvas');\n    var instance1 = confetti.create(canvas, { resize: true, useWorker: true });\n  `);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000'],\n    startVelocity: 2,\n    spread: 360,\n  }, 'instance1');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ffffff']);\n\n  await page.evaluate(`\n    var canvas = document.querySelector('#testcanvas');\n    var instance2 = confetti.create(canvas, { resize: true, useWorker: true });\n  `);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff00ff'],\n    startVelocity: 2,\n    spread: 360,\n  }, 'instance2');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  // note: canvas is owned by the worker, so an existing animation will continue\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ff00ff', '#ffffff']);\n});\n\ntest('[custom canvas] can initialize the same canvas multiple times without using a worker', async t => {\n  const page = t.context.page = await fixturePage();\n  await page.evaluate(`\n    var canvas = document.createElement('canvas');\n    canvas.id = 'testcanvas';\n    canvas.style.width = '100%';\n    canvas.style.height = '100%';\n\n    document.body.appendChild(canvas);\n  `);\n\n  await page.evaluate(`\n    var canvas = document.querySelector('#testcanvas');\n    var instance1 = confetti.create(canvas, { resize: true, useWorker: false });\n  `);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff0000'],\n    startVelocity: 2,\n    spread: 360,\n  }, 'instance1');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff0000', '#ffffff']);\n\n  await page.evaluate(`\n    var canvas = document.querySelector('#testcanvas');\n    var instance2 = confetti.create(canvas, { resize: true, useWorker: false });\n  `);\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff00ff'],\n    startVelocity: 2,\n    spread: 360,\n  }, 'instance2');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  // note: canvas can only be owned by one instance in the main thread,\n  // so the animation is reset\n  t.deepEqual(await uniqueColors(t.context.image), ['#ff00ff', '#ffffff']);\n});\n\ntest('[custom canvas] calling `reset` method clears all existing confetti but more can be launched after', async t => {\n  const page = t.context.page = await fixturePage();\n  await injectCanvas(page);\n\n  const prom1 = page.evaluate(confetti({ colors: ['#ff0000'] }, true, 'myConfetti'));\n  await sleep(50);\n  const img1 = await page.screenshot({ type: 'png' });\n\n  await Promise.all([\n    prom1,\n    page.evaluate(`myConfetti.reset();`)\n  ]);\n  const img2 = await page.screenshot({ type: 'png' });\n\n  const prom2 = page.evaluate(confetti({ colors: ['#ff0000'] }, true, 'myConfetti'));\n  await sleep(50);\n  const img3 = await page.screenshot({ type: 'png' });\n\n  await prom2;\n\n  t.deepEqual(await uniqueColors(await reduceImg(img1)), ['#ff0000', '#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img2)), ['#ffffff']);\n  t.deepEqual(await uniqueColors(await reduceImg(img3)), ['#ff0000', '#ffffff']);\n});\n\n/*\n * Browserify tests\n */\n\ntest('[browserify] works using the browserify bundle', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.browserify.html');\n\n  await page.evaluate(`void confetti({\n    colors: ['#00ff00'],\n    particleCount: 200,\n    spread: 270\n  })`);\n\n  await sleep(100);\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#00ff00', '#ffffff']);\n});\n\n/*\n * Minified tests\n * using minification close to that of jsDelivr\n */\n\ntest('[minified] works using the terser minified and compressed code', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.minified.html');\n\n  await page.evaluate(`void confetti({\n    colors: ['#ff00ff'],\n    particleCount: 200,\n    spread: 270\n  })`);\n\n  await sleep(100);\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#ff00ff', '#ffffff']);\n});\n\n/*\n * ESM tests\n */\n\ntest('[esm] the esm module exposed confetti as the default', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.module.html');\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff00ff']\n  }, 'confettiAlias');\n\n  t.context.buffer = await page.screenshot({ type: 'png' });\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#ff00ff', '#ffffff']);\n});\n\ntest('[esm] the esm module exposed confetti.create as create', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.module.html');\n\n  await injectCanvas(page, { allowResize: true }, 'createAlias');\n\n  t.context.buffer = await confettiImage(page, {\n    colors: ['#ff00ff']\n  }, 'myConfetti');\n  t.context.image = await reduceImg(t.context.buffer);\n\n  const pixels = await uniqueColors(t.context.image);\n\n  t.deepEqual(pixels, ['#ff00ff', '#ffffff']);\n});\n\ntest('[esm] exposed confetti method has a `reset` property', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.module.html');\n\n  t.is(await page.evaluate(`typeof confettiAlias.reset`), 'function');\n});\n\ntest('[esm] exposed confetti method has a `shapeFromPath` property', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.module.html');\n\n  t.is(await page.evaluate(`typeof confettiAlias.shapeFromPath`), 'function');\n});\n\ntest('[esm] exposed confetti method has a `shapeFromText` property', async t => {\n  const page = t.context.page = await fixturePage('fixtures/page.module.html');\n\n  t.is(await page.evaluate(`typeof confettiAlias.shapeFromText`), 'function');\n});\n"
  },
  {
    "path": "test/ssr.test.js",
    "content": "import vm from 'vm';\nimport path from 'path';\nimport fs from 'fs';\nimport { promisify } from 'util';\n\nimport test from 'ava';\nimport root from 'rootrequire';\n\nimport pkg from '../package.json';\n\ntest('can be evaluated in a node vm', async t => {\n  const file = await promisify(fs.readFile)(path.resolve(root, pkg.main), 'utf8');\n  t.is(typeof file, 'string');\n\n  const context = vm.createContext({ module: {} });\n  vm.runInContext(file, context);\n\n  t.is(typeof context.module.exports, 'function');\n  t.is(typeof context.module.exports.create, 'function');\n  t.is(typeof context.module.exports.reset, 'function');\n});\n"
  }
]