Installation
Canvas Confetti is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is copied by the
Build Tools
into the
/dist/assets/vendors/canvas-confetti
directory.
Require Assets
To use Canvas Confetti in your pages, include the following script in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/canvas-confetti/canvas-confetti.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/pages/plugins/canvas-confetti/basic-cannon.js">
</script>
</body>
</html>
Basic Cannon
A single blast of confetti from the center of the viewport. Click the button to fire.
class KTExampleCanvasConfettiBasicCannon {
static init() {
const btn = document.getElementById('confetti_basic_cannon_btn');
if (!btn) return;
btn.addEventListener('click', function () {
// Basic cannon: single blast from center
// https://www.kirilv.com/canvas-confetti/
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 },
});
});
}
}
KTDom.ready(() => {
KTExampleCanvasConfettiBasicCannon.init();
});
<button class="kt-btn kt-btn-primary" id="confetti_basic_cannon_btn" type="button">
Fire Confetti
</button>
Random Direction
Confetti in random directions with random particle count. Click the button to fire.
class KTExampleCanvasConfettiRandomDirection {
static init() {
const btn = document.getElementById('confetti_random_direction_btn');
if (!btn) return;
btn.addEventListener('click', function () {
// Random direction: random count and spread
// https://www.kirilv.com/canvas-confetti/
const count = 200;
const defaults = {
origin: { y: 0.7 },
};
function fire(particleRatio, opts) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
});
}
fire(0.25, { spread: 26, startVelocity: 55 });
fire(0.2, { spread: 60 });
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
fire(0.1, { spread: 120, startVelocity: 45 });
});
}
}
KTDom.ready(() => {
KTExampleCanvasConfettiRandomDirection.init();
});
<button class="kt-btn kt-btn-primary" id="confetti_random_direction_btn" type="button">
Random Confetti
</button>
Fireworks
Repeated bursts from the sides of the viewport for a fireworks effect. Click the button to run.
class KTExampleCanvasConfettiFireworks {
static init() {
const btn = document.getElementById('confetti_fireworks_btn');
if (!btn) return;
function fire(fromLeft, fromRight) {
const count = 50;
const defaults = {
origin: { y: 0.7 },
zIndex: 0,
};
confetti({
...defaults,
particleCount: count,
spread: 55,
origin: { x: fromLeft, y: fromRight },
});
confetti({
...defaults,
particleCount: count,
spread: 55,
origin: { x: 1 - fromLeft, y: fromRight },
});
}
btn.addEventListener('click', function () {
// Fireworks: side cannons, repeated
// https://www.kirilv.com/canvas-confetti/
const duration = 3000;
const end = Date.now() + duration;
const interval = setInterval(function () {
const timeLeft = end - Date.now();
if (timeLeft <= 0) {
clearInterval(interval);
return;
}
const particleCount = 50 * (timeLeft / duration);
fire(0.1, Math.random());
fire(0.9, Math.random());
}, 250);
});
}
}
KTDom.ready(() => {
KTExampleCanvasConfettiFireworks.init();
});
<button class="kt-btn kt-btn-primary" id="confetti_fireworks_btn" type="button">
Fireworks
</button>
Stars
Star-shaped confetti for a celebratory burst. Click the button to fire.
class KTExampleCanvasConfettiStars {
static init() {
const btn = document.getElementById('confetti_stars_btn');
if (!btn) return;
btn.addEventListener('click', function () {
// Stars: custom shape (star)
// https://www.kirilv.com/canvas-confetti/
const count = 200;
const defaults = {
origin: { y: 0.7 },
};
function fire(particleRatio, opts) {
confetti({
...defaults,
...opts,
particleCount: Math.floor(count * particleRatio),
shapes: ['star'],
});
}
fire(0.25, { spread: 26, startVelocity: 55 });
fire(0.2, { spread: 60 });
fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
fire(0.1, { spread: 120, startVelocity: 45 });
});
}
}
KTDom.ready(() => {
KTExampleCanvasConfettiStars.init();
});
<button class="kt-btn kt-btn-primary" id="confetti_stars_btn" type="button">
Stars
</button>
Snow
Gently falling snow-like particles across the viewport. Click the button to start.
class KTExampleCanvasConfettiSnow {
static init() {
const btn = document.getElementById('confetti_snow_btn');
if (!btn) return;
btn.addEventListener('click', function () {
// Snow: gentle falling particles
// https://www.kirilv.com/canvas-confetti/
const duration = 5000;
const end = Date.now() + duration;
const interval = setInterval(function () {
const timeLeft = end - Date.now();
if (timeLeft <= 0) {
clearInterval(interval);
return;
}
const particleCount = 50 * (timeLeft / duration);
confetti({
particleCount,
spread: 100,
origin: { x: Math.random(), y: Math.random() - 0.2 },
colors: ['#ffffff', '#e4e4e7', '#d4d4d8'],
ticks: 200,
gravity: 0.3,
scalar: 0.8,
drift: 0.5,
});
}, 350);
});
}
}
KTDom.ready(() => {
KTExampleCanvasConfettiSnow.init();
});
<button class="kt-btn kt-btn-primary" id="confetti_snow_btn" type="button">
Snow
</button>
