Confetti didn't display star shape

tranmanhlt7a4 commented 1 year ago

I used the default Snow code at https://www.kirilv.com/canvas-confetti/ On that website, I changed shape: ['circle'] to sharp: ['star'] and it worked well

But when I use this code on my website, it only displays the diamond shape!

Here is my code: HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</title>

  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
  <script type="text/javascript" src="a.js" defer></script>
</head>
<body>

</body>
</html>

And this is my a.js (just copy-paste from the demo website, and only change sharp: ['star'] and color to see animation easily): a.js file:

var duration = 15 * 1000;
var animationEnd = Date.now() + duration;
var skew = 1;

function randomInRange(min, max) {
  return Math.random() * (max - min) + min;
}

(function frame() {
  var timeLeft = animationEnd - Date.now();
  var ticks = Math.max(200, 500 * (timeLeft / duration));
  skew = Math.max(0.8, skew - 0.001);

  confetti({
    particleCount: 1,
    startVelocity: 0,
    ticks: ticks,
    origin: {
      x: Math.random(),
      // since particles fall down, skew start toward the top
      y: (Math.random() * skew) - 0.2
    },
    colors: ['#000'],
    shapes: ['star'],
    gravity: randomInRange(0.4, 0.6),
    scalar: randomInRange(0.4, 1),
    drift: randomInRange(-0.4, 0.4)
  });

  if (timeLeft > 0) {
    requestAnimationFrame(frame);
  }
}());

What happened? And how can I fix it? Note: I am using the newest version of Google Chrome:

catdad commented 1 year ago

The star shape was released in 1.6.0 but in your code you are using version 1.5.1

tranmanhlt7a4 commented 1 year ago

Oh, I see! Thanks a lot for your help

catdad / canvas-confetti

Confetti didn't display star shape #191