### Launching Confetti Patterns

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Examples of various configuration options for launching confetti, including default triggers, high particle counts, wide spreads, and random origin points.

```javascript
confetti();
```

```javascript
confetti({
  particleCount: 150
});
```

```javascript
confetti({
  spread: 180
});
```

```javascript
confetti({
  particleCount: 100,
  startVelocity: 30,
  spread: 360,
  origin: {
    x: Math.random(),
    y: Math.random() - 0.2
  }
});
```

--------------------------------

### Install canvas-confetti via npm

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Installs the canvas-confetti module using npm. This is a client-side component and requires a build process like webpack to be used in a project.

```bash
npm install --save canvas-confetti
```

--------------------------------

### Install Canvas Confetti via NPM

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Installs the canvas-confetti library using npm. It supports both CommonJS and ES Module import syntaxes for integration into various JavaScript projects.

```bash
npm install --save canvas-confetti
```

```javascript
// CommonJS
const confetti = require('canvas-confetti');

// ES Module
import confetti from 'canvas-confetti';
```

--------------------------------

### Creating Custom Confetti Shapes with SVG Path

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

This example shows how to create a custom confetti shape using the `confetti.shapeFromPath` helper method with an SVG path string. The resulting shape can then be used in the `shapes` array of the confetti options. Note that paths are filled and limited to a single color.

```javascript
var triangle = confetti.shapeFromPath({
  path: 'M0 10 L5 0 L10 10z'
});

confetti({
  shapes: [triangle]
});
```

--------------------------------

### Create Custom Confetti Shapes from SVG Paths

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

This snippet demonstrates how to define custom shapes for confetti using SVG paths. It includes examples for pumpkin, tree, and heart shapes, specifying their paths and transformation matrices. These shapes can then be used with the confetti function.

```javascript
var pumpkin = confetti.shapeFromPath({ 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-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', matrix: [0.020491803278688523, 0, 0, 0.020491803278688523, -7.172131147540983, -5.9016393442622945] });
var tree = confetti.shapeFromPath({ 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', matrix: [0.03597122302158273, 0, 0, 0.03597122302158273, -4.856115107913669, -5.071942446043165] });
var heart = confetti.shapeFromPath({ 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', matrix: [0.03333333333333333, 0, 0, 0.03333333333333333, -5.566666666666666, -5.533333333333333] });
```

--------------------------------

### Create and Trigger Emoji Confetti Effects

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

This function demonstrates creating confetti effects using text-based shapes, specifically a unicorn emoji. It defines default properties for the confetti, including gravity, decay, and start velocity, and then triggers multiple confetti bursts with different shapes and particle counts, including emoji and simple circles.

```javascript
var scalar = 2;
var unicorn = confetti.shapeFromText({ text: '🦄', scalar });
var defaults = { spread: 360, ticks: 60, gravity: 0, decay: 0.96, startVelocity: 20, shapes: [unicorn], scalar };

function shoot() {
  confetti({ ...defaults, particleCount: 30 });
  confetti({ ...defaults, particleCount: 5, flat: true });
  confetti({ ...defaults, particleCount: 15, scalar: scalar / 2, shapes: ['circle'] });
}

setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);
```

--------------------------------

### Trigger Custom Shape Confetti Effects

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

This snippet shows how to trigger confetti effects using the custom shapes defined previously. It utilizes default settings for scalar, spread, particle count, origin, and start velocity, and then applies specific color palettes to each custom shape (pumpkin, tree, heart).

```javascript
var defaults = { scalar: 2, spread: 180, particleCount: 30, origin: { y: -0.1 }, startVelocity: -35 };
confetti({ ...defaults, shapes: [ pumpkin ], colors: ['#ff9a00', '#ff7400', '#ff4d00'] });
confetti({ ...defaults, shapes: [ tree ], colors: ['#8d960f', '#be0f10', '#445404'] });
confetti({ ...defaults, shapes: [ heart ], colors: ['#f93963', '#a10864', '#ee0b93'] });
```

--------------------------------

### Launch Basic and Customized Confetti Bursts

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Demonstrates how to launch confetti animations using the main `confetti()` function. It covers a basic burst and a highly customized burst with various parameters like particle count, angle, spread, gravity, and colors. The function returns a Promise that resolves when the animation completes.

```javascript
// Basic confetti burst
confetti();

// Customized confetti with all options
confetti({
  particleCount: 100,
  angle: 90,
  spread: 70,
  startVelocity: 45,
  decay: 0.9,
  gravity: 1,
  drift: 0,
  flat: false,
  ticks: 200,
  origin: { x: 0.5, y: 0.6 },
  colors: ['#ff0000', '#00ff00', '#0000ff'],
  shapes: ['square', 'circle', 'star'],
  scalar: 1,
  zIndex: 100,
  disableForReducedMotion: true
}).then(() => {
  console.log('Animation complete!');
});

// Example output: Colorful confetti burst from center-bottom of screen
```

--------------------------------

### Initialize Canvas Confetti Test Environment

Source: https://github.com/catdad/canvas-confetti/blob/master/fixtures/page.module.html

This script sets up the global test environment by importing the confetti module and assigning its exports to window aliases. It includes a safety check to prevent re-initialization and ensures the module is correctly loaded.

```css
html, body { padding: 0; margin: 0; width: 100%; height: 100%; }
```

```javascript
import confetti, { create } from '/dist/confetti.module.mjs';

if (window.confetti) {
  throw 'nope';
}

window.confettiAlias = confetti;
window.createAlias = create;
```

--------------------------------

### Code Beautification and Editor Initialization

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

This snippet contains utility functions for code beautification using js-beautify and for retrieving and formatting code for editor display. It also includes the initialization logic for Ace editors, setting themes, modes, and tab sizes, and dynamically adjusting editor height based on code length.

```javascript
function pretty(val) {
  return js_beautify(val, {
    indent_size: 2,
    brace_style: 'preserve-inline',
  });
}

function getCode(name) {
  var code = pretty(modes[name].toString());
  code = code.split('\n').slice(1).slice(0, -1).map(function (s) {
    return s.trim();
  }).join('\n');
  return pretty(code);
}

window.onload = function () {
  [].forEach.call(document.querySelectorAll('.group'), function (group) {
    var name = group.getAttribute('data-name');
    var button = group.querySelector('.run');
    var codeElem = group.querySelector('.editor');
    var editor = ace.edit(codeElem);
    editor.setTheme(themes[activeTheme]);
    editor.session.setMode('ace/mode/javascript');
    editor.session.setUseSoftTabs(true);
    editor.session.setTabSize(2);
    editor.session.setValue(getCode(name));
    var count = editor.session.getLength();
    codeElem.style.minHeight = (14 * count) + 1 + 'px';
    codeElem.style.height = (count) + 'rem';
    button.onclick = function (ev) {
      ev.preventDefault();
      try {
        eval(editor.getValue());
      } catch (e) {
        console.error(e);
      }
    };
    editors.push(editor);
  });
};
```

--------------------------------

### Manage Theme Switching

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

Handles theme persistence using localStorage and toggles between light, dark, and system-preferred modes. It updates the document body attributes and refreshes editor themes accordingly.

```javascript
var themes = { light: 'ace/theme/xcode', dark: 'ace/theme/monokai' };
var setTheme = function (isAuto, theme) {
  if (isAuto) {
    document.body.setAttribute('auto-theme', true);
    activeTheme = getPreferedTheme();
  } else {
    document.body.removeAttribute('auto-theme');
    activeTheme = theme;
  }
  document.body.setAttribute('data-theme', activeTheme);
  editors.forEach(function(editor) { editor.setTheme(themes[activeTheme]); });
};
```

--------------------------------

### Configuring Confetti Options

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

This snippet demonstrates how to configure various properties of the confetti effect, such as particle count, angle, spread, velocity, gravity, and colors. These options allow for fine-grained control over the appearance and behavior of the confetti.

```javascript
confetti({
  particleCount: 100,
  angle: 90,
  spread: 45,
  startVelocity: 45,
  decay: 0.9,
  gravity: 1,
  drift: 0,
  flat: false,
  ticks: 200,
  origin: {
    x: 0.5,
    y: 0.5
  },
  colors: ['#ff0000', '#00ff00', '#0000ff'],
  shapes: ['circle', 'star'],
  scalar: 1,
  zIndex: 100,
  disableForReducedMotion: false
});
```

--------------------------------

### Implement Custom Promise with JavaScript

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Allows the use of a custom Promise implementation, such as Bluebird, with the canvas-confetti library for environments lacking native Promise support. This involves assigning the custom Promise constructor to `confetti.Promise` before initiating confetti animations, enabling chained `.then()` callbacks with the custom Promise type.

```javascript
const MyPromise = require('bluebird'); // or any Promise library
const confetti = require('canvas-confetti');

// Set custom Promise implementation
confetti.Promise = MyPromise;

// Now confetti returns your custom Promise type
confetti({
  particleCount: 100,
  spread: 70
}).then(() => {
  console.log('Done with custom Promise!');
});
```

--------------------------------

### Configure Promise implementation for canvas-confetti

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Allows specifying a custom Promise implementation for the canvas-confetti library, useful for environments where native Promises are not available or a specific polyfill is preferred.

```javascript
const MyPromise = require('some-promise-lib');
const confetti = require('canvas-confetti');
confetti.Promise = MyPromise;
```

--------------------------------

### Create Confetti Instance for Specific Canvas

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Shows how to create a dedicated confetti instance bound to a specific canvas element using `confetti.create()`. This method is useful for containing confetti effects within a defined area and can optionally utilize Web Workers for improved rendering performance. It also includes methods to reset the instance.

```javascript
// Create a custom canvas and confetti instance
const myCanvas = document.createElement('canvas');
myCanvas.style.width = '400px';
myCanvas.style.height = '300px';
document.getElementById('celebration-area').appendChild(myCanvas);

// Create confetti instance with options
const myConfetti = confetti.create(myCanvas, {
  resize: true,
  useWorker: true,
  disableForReducedMotion: false
});

// Use the custom instance
myConfetti({
  particleCount: 50,
  spread: 160,
  origin: { y: 1.2 }
});

// Reset/clear the custom instance
myConfetti.reset();

// Example: Confetti contained within the 400x300 canvas area
```

--------------------------------

### CSS Theming Variables

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

Defines CSS custom properties for theming the application, including colors for different themes (dark, light, auto) and icons for theme switching.

```css
:root {
  --primary-color: #eeeeee;
  --secondary-color: #363636;
  --secondary-variant-color: #272727;
  --background-color: #212121;
  --inner-color: #ffffff;
  --border-color: #555651;
  /* icons by Google - Material Design - https://material.io/resources/icons/?style=baseline */
  --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");
  --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");
  --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");
  --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");
  --theme-switch: var(--switch-moon-white);
}

[data-theme="light"] {
  --primary-color: #212121;
  --secondary-color: #ffffff;
  --background-color: #f0f0f0;
  --inner-color: #363636;
  --theme-switch: var(--switch-sun-black);
}

[auto-theme] {
  --theme-switch: var(--switch-auto-white);
}

[data-theme="light"][auto-theme] {
  --theme-switch: var(--switch-auto-black);
}
```

--------------------------------

### confetti.create(canvas, globalOptions)

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Creates a scoped confetti instance bound to a specific HTML canvas element, allowing for contained effects and performance optimizations.

```APIDOC
## confetti.create(canvas, globalOptions)

### Description
Initializes a confetti instance on a specific canvas. Returns a function that behaves like the standard confetti() function but is scoped to the provided canvas.

### Parameters
#### Path Parameters
- **canvas** (HTMLElement) - Required - The canvas element to render on

#### Request Body
- **resize** (boolean) - Optional - Auto-resize canvas (default: false)
- **useWorker** (boolean) - Optional - Use Web Worker for rendering (default: false)

### Response
#### Success Response
- **instance** (function) - A function to trigger confetti on the specific canvas.
```

--------------------------------

### Basic HTML Structure and Styling

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

Provides the fundamental HTML structure and CSS for the canvas-confetti project, including header, footer, and layout elements. It also sets up scroll behavior and basic body styling.

```html
html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  background: var(--background-color);
  color: var(--primary-color);
  font-size: 1em;
  font-family: 'Noto Sans', sans-serif;
}

* {
  box-sizing: border-box;
}

.sprite {
  display: none;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 64px;
}

.theme {
  --size: 28px;
  position: relative;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  background: none;
  border: none;
  outline: none;
  margin-right: 12px;
  cursor: pointer;
}

.theme:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: var(--size);
  height: var(--size);
  background-repeat: no-repeat;
  background-position: center;
  background: var(--theme-switch);
}

.github-icon {
  --size: 36px;
  position: relative;
  display: block;
  width: var(--size);
  height: var(--size);
  margin-right: 12px;
}

.github-icon svg.icon {
  fill: var(--primary-color);
}

h1, h2, .center {
  text-align: center;
}

h1 {
  margin-top: 64px;
}

h2 {
  padding: 0;
  margin: 0.25em;
}

p {
  margin: 0.5em;
}

.container {
  position: relative;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.group {
  position: relative;
  width: 100%;
  margin: 40px 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  border-radius: 20px;
}

.run {
  padding: 10px 6px;
  margin: 0.75em auto;
  max-width: 200px;
  width: 100%;
  display: inline-block;
  background: var(--secondary-color);
  border: none;
  outline: none;
  color: var(--inner-color);
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 100ms ease;
}

.group .run:hover {
  opacity: 1;
}

.editor {
  position: relative;
  min-height: 100px;
  width: 100%;
}

.editor.ace_dark.ace_editor {
  background-color: var(--secondary-color);
}

.editor.ace_dark .ace_gutter {
  background: var(--secondary-variant-color);
}

.editor.ace_dark .ace_gutter .ace_gutter-cell {
  color: var(--inner-color);
  opacity: 0.6;
}

.flex-rows {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 1em;
}

.description {
  width: 94%;
  margin: 10px auto;
  padding: 0;
  align-items: center;
  line-height: 1.5;
}

.left {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

a.anchor {
  position: relative;
  color: currentColor;
  text-decoration: none;
}

a.anchor:hover::before {
  content: "🔗";
  color: currentColor;
  position: absolute;
  left: -2rem;
  top: 0;
  transform: scale(0.75, 0.75);
}

footer {
  font-size: 0.9rem;
  text-align: center;
  line-height: 2;
  background: var(--secondary-color);
}

footer span {
  vertical-align: middle;
}

span.icon {
  position: relative;
  display: inline-block;
  height: 1em;
  width: 1em;
}

svg.icon {
  position: absolute;
  pointer-events: none;
  left: 0;
  width: 100%;
  height: 100%;
  fill: var(--inner-color);
}

footer a {
  text-decoration: none;
  color: var(--inner-color);
  opacity: 0.85;
  will-change: opacity;
}

footer a:hover {
  opacity: 1;
}
```

--------------------------------

### Resetting Confetti Animations

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Demonstrates how to stop active animations and clear confetti. This works for both the global confetti instance and custom instances created via confetti.create.

```javascript
confetti();

setTimeout(() => {
  confetti.reset();
}, 100);
```

```javascript
var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas, { resize: true });

myConfetti();

setTimeout(() => {
  myConfetti.reset();
}, 100);
```

--------------------------------

### Create a snow effect

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Simulates falling snow using requestAnimationFrame to render small, white, circular particles with randomized gravity and drift.

```javascript
(function frame() {
  confetti({
    particleCount: 1,
    colors: ['#ffffff'],
    shapes: ['circle'],
    origin: { x: Math.random(), y: -0.2 }
  });
  requestAnimationFrame(frame);
}());
```

--------------------------------

### Define Custom Confetti Shapes from SVG Paths

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Illustrates how to create custom confetti shapes using SVG path data with the `confetti.shapeFromPath()` function. This allows for unique confetti designs beyond the built-in shapes. The function returns an object representing the shape, which can then be used in confetti configurations. It also shows how to provide a transformation matrix for performance optimization.

```javascript
// Create a triangle shape
const triangle = confetti.shapeFromPath({
  path: 'M0 10 L5 0 L10 10z'
});

// Create a heart shape with pre-calculated matrix for better performance
const heart = confetti.shapeFromPath({
  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',
  matrix: [0.03333333333333333, 0, 0, 0.03333333333333333, -5.566666666666666, -5.533333333333333]
});

// Pumpkin shape for Halloween
const pumpkin = confetti.shapeFromPath({
  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-173z',
  matrix: [0.020491803278688523, 0, 0, 0.020491803278688523, -7.172131147540983, -5.9016393442622945]
});

// Use custom shapes
confetti({
  shapes: [heart],
  colors: ['#f93963', '#a10864', '#ee0b93'],
  scalar: 2,
  spread: 180,
  particleCount: 30,
  origin: { y: -0.1 },
  startVelocity: -35
});

// Returns: { type: 'path', path: '...', matrix: [...] }
```

--------------------------------

### Create a realistic confetti burst

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Combines multiple confetti calls with varying parameters to simulate a natural, multi-layered explosion effect.

```javascript
function fire(particleRatio, opts) {
  confetti({ ...opts, particleCount: Math.floor(200 * particleRatio) });
}

fire(0.25, { spread: 26, startVelocity: 55 });
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
```

--------------------------------

### Render Transformed Emoji Shapes

Source: https://github.com/catdad/canvas-confetti/blob/master/fixtures/debug.html

Demonstrates how to transform and draw emoji shapes onto a 2D canvas context. It handles browser-specific pattern creation issues by falling back to an OffscreenCanvas when necessary.

```javascript
const drawTransformedEmoji = async ({ fontFamily, canvas, ctx, offsetX = 0, offsetY = 0 }) => { ['🦄', '🍑', '🤣', '🐈'].forEach((text, idx) => { const shape1 = confetti.shapeFromText({ text, scalar: 1, fontFamily }); const shape2 = confetti.shapeFromText({ text, scalar: 2, fontFamily }); const shape5 = confetti.shapeFromText({ text, scalar: 5, fontFamily }); const y = idx * 100 + 50 + offsetY; ctx.drawImage(shape1.bitmap, 0, y); ctx.drawImage(shape2.bitmap, 100, y); ctx.drawImage(shape5.bitmap, 200, y); [[shape1, 1], [shape2, 2], [shape5, 5]].forEach(([shape, scale], j) => { const x = 300 + (j * 100) + offsetX; const rotation = 3.2; const scaleX = scale * 0.8; const scaleY = scale * 1.4; var matrix = new DOMMatrix([ Math.cos(rotation) * scaleX, Math.sin(rotation) * scaleX, -Math.sin(rotation) * scaleY, Math.cos(rotation) * scaleY, x, y ]); matrix.multiplySelf(new DOMMatrix(shape.matrix)); const pattern = (() => { try { return ctx.createPattern(shape.bitmap, 'no-repeat'); } catch (e) { return ctx.createPattern(drawBitmapToCanvas(shape.bitmap), 'no-repeat'); } })(); pattern.setTransform(matrix); ctx.fillStyle = pattern; ctx.fillRect(x - 100, y - 100, 300, 300); }); }); };
```

--------------------------------

### Live Favicon Rendering with Confetti Shape

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

This code snippet demonstrates how to dynamically render a live favicon using the canvas-confetti library. It creates a confetti shape from the '🎊' emoji, transfers its bitmap to an OffscreenCanvas, converts it to a blob, and then updates the favicon's href attribute.

```javascript
addEventListener("load", (event) => {
  const image = confetti.shapeFromText('🎊', { scalar: 512/10 });
  const canvas = new OffscreenCanvas(image.bitmap.width, image.bitmap.height);
  const ctx = canvas.getContext('bitmaprenderer');
  ctx.transferFromImageBitmap(image.bitmap);
  canvas.convertToBlob().then(blob => {
    const icon = document.getElementById('favicon');
    icon.setAttribute('href', URL.createObjectURL(blob));
  });
});
```

--------------------------------

### Initialize Confetti on a Custom Canvas

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Creates an instance of the confetti function bound to a specific HTML canvas element. This allows for isolated rendering and configuration of options like canvas resizing and web worker usage.

```javascript
var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas, {
  resize: true,
  useWorker: true
});
myConfetti({
  particleCount: 100,
  spread: 160
});
```

--------------------------------

### Load Emoji Fonts for Canvas Rendering

Source: https://github.com/catdad/canvas-confetti/blob/master/fixtures/debug.html

Asynchronously loads Noto Color Emoji fonts for both Safari and standard browsers using the FontFace API. It returns the font family string once all font files are successfully loaded.

```javascript
const loadFonts = async () => { const isSafari = navigator.vendor === 'Apple Computer, Inc.'; const fontName = 'Noto Color Emoji'; await Promise.all([0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => { const safari = `url(https://fonts.gstatic.com/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diysYTngZPnMC1MfLd4hQ.${n}.woff2)`; const realBrowser = `url(https://fonts.gstatic.com/s/notocoloremoji/v25/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.${n}.woff2)`; const fontFile = new FontFace( fontName, isSafari ? safari : realBrowser ); document.fonts.add(fontFile); return fontFile.load(); })); return `"${fontName}"`; };
```

--------------------------------

### Launch school pride side cannons

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Creates a continuous stream of confetti from the left and right edges of the screen using specific angles and team colors.

```javascript
const colors = ['#bb0000', '#ffffff'];
(function frame() {
  confetti({ particleCount: 2, angle: 60, origin: { x: 0 }, colors });
  confetti({ particleCount: 2, angle: 120, origin: { x: 1 }, colors });
  requestAnimationFrame(frame);
}());
```

--------------------------------

### confetti(options)

Source: https://context7.com/catdad/canvas-confetti/llms.txt

The primary function to trigger a confetti animation. It accepts an options object to customize the physics, appearance, and behavior of the particles.

```APIDOC
## confetti(options)

### Description
Launches a confetti burst on the screen. Returns a Promise that resolves when the animation finishes.

### Parameters
#### Request Body
- **particleCount** (number) - Optional - Number of particles (default: 50)
- **angle** (number) - Optional - Launch angle in degrees (default: 90)
- **spread** (number) - Optional - Spread angle in degrees (default: 45)
- **startVelocity** (number) - Optional - Initial velocity (default: 45)
- **decay** (number) - Optional - Speed decay rate (default: 0.9)
- **gravity** (number) - Optional - Gravity pull (default: 1)
- **origin** (object) - Optional - Launch position {x, y} in 0-1 range
- **colors** (array) - Optional - Array of HEX color strings
- **shapes** (array) - Optional - Array of shapes (e.g., 'square', 'circle')

### Request Example
{
  "particleCount": 100,
  "angle": 90,
  "spread": 70,
  "origin": { "x": 0.5, "y": 0.6 }
}

### Response
#### Success Response (Promise)
- **result** (null/void) - Resolves when the animation completes.
```

--------------------------------

### Trigger Confetti Animations

Source: https://github.com/catdad/canvas-confetti/blob/master/index.html

Provides various functions to trigger different confetti patterns such as fireworks, snow, and star bursts. These functions utilize the confetti() library method with specific configurations for velocity, spread, and duration.

```javascript
function fireworks() {
  var duration = 15 * 1000;
  var animationEnd = Date.now() + duration;
  var defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
  var interval = setInterval(function () {
    var timeLeft = animationEnd - Date.now();
    if (timeLeft <= 0) return clearInterval(interval);
    var particleCount = 50 * (timeLeft / duration);
    confetti({ ...defaults, particleCount, origin: { x: Math.random(), y: Math.random() - 0.2 } });
  }, 250);
}
```

--------------------------------

### Render Debug Emoji on Canvas

Source: https://github.com/catdad/canvas-confetti/blob/master/fixtures/debug.html

Executes debug rendering for emojis using specified font families. It handles potential errors during the drawing process and logs them to the console.

```javascript
(async () => {
  await drawDebugEmoji({ fontFamily, canvas, ctx });
  await drawTransformedEmoji({ fontFamily, canvas, ctx, offsetY: 200 });
}).catch(e => {
  console.log('something went wrong:', e);
});
```

--------------------------------

### Include Canvas Confetti via CDN

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Includes the canvas-confetti library directly into an HTML page using a CDN link. This makes the confetti API available globally in the browser's JavaScript environment.

```html
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>
```

--------------------------------

### Create a fireworks effect

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Generates a continuous fireworks display by launching confetti from random coordinates at set intervals over a defined duration.

```javascript
const duration = 15 * 1000;
const animationEnd = Date.now() + duration;
const interval = setInterval(function() {
  const timeLeft = animationEnd - Date.now();
  if (timeLeft <= 0) return clearInterval(interval);
  const particleCount = 50 * (timeLeft / duration);
  confetti({ particleCount, origin: { x: Math.random(), y: Math.random() - 0.2 } });
}, 250);
```

--------------------------------

### Reset and stop confetti animations

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Demonstrates how to immediately halt all active confetti animations and clear the canvas using the reset method. This is useful for cleaning up animations after a timeout or when a specific event occurs.

```javascript
confetti({ particleCount: 200, spread: 180 });

setTimeout(() => {
  confetti.reset();
}, 2000);
```

--------------------------------

### Continuous Confetti Animation Loop

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Uses requestAnimationFrame to continuously launch confetti from multiple origins over a specified duration.

```javascript
var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });

  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());
```

--------------------------------

### confetti.shapeFromPath(pathData)

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Utility to define custom confetti shapes using SVG path data, which can then be passed to the shapes option in the confetti function.

```APIDOC
## confetti.shapeFromPath(pathData)

### Description
Converts an SVG path string into a shape object usable by the confetti library.

### Parameters
#### Request Body
- **path** (string) - Required - SVG path data string
- **matrix** (array) - Optional - Transformation matrix for scaling/positioning

### Response
#### Success Response
- **shapeObject** (object) - An object containing the processed path and matrix data.
```

--------------------------------

### Create confetti shapes from text or emoji

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Uses shapeFromText to rasterize text or emojis into bitmaps for use as custom confetti shapes. This allows for personalized particle designs using specific fonts, colors, or characters.

```javascript
const pineapple = confetti.shapeFromText({ text: '🍍', scalar: 2 });

confetti({
  shapes: [pineapple],
  scalar: 2,
  particleCount: 30
});
```

--------------------------------

### Create Custom Confetti Shape from Text

Source: https://github.com/catdad/canvas-confetti/blob/master/README.md

Generates a custom confetti shape using a unicode character or text string. It is recommended to match the scalar value used during shape creation with the confetti options to prevent blurriness.

```javascript
var scalar = 2;
var pineapple = confetti.shapeFromText({ text: '🍍', scalar });

confetti({
  shapes: [pineapple],
  scalar
});
```

--------------------------------

### Create Star Burst Effect with JavaScript

Source: https://context7.com/catdad/canvas-confetti/llms.txt

Generates a starburst animation using confetti. This effect utilizes customizable default parameters for spread, gravity, velocity, and colors, and can render different shapes like stars and circles. It's typically initiated by calling a shoot function, often with timed delays.

```javascript
const defaults = {
  spread: 360,
  ticks: 50,
  gravity: 0,
  decay: 0.94,
  startVelocity: 30,
  colors: ['FFE400', 'FFBD00', 'E89400', 'FFCA6C', 'FDFFB8']
};

function shoot() {
  confetti({
    ...defaults,
    particleCount: 40,
    scalar: 1.2,
    shapes: ['star']
  });

  confetti({
    ...defaults,
    particleCount: 10,
    scalar: 0.75,
    shapes: ['circle']
  });
}

setTimeout(shoot, 0);
setTimeout(shoot, 100);
setTimeout(shoot, 200);
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.