search

catdad / canvas-confetti

🎉 performant confetti animation in the browser
https://catdad.github.io/canvas-confetti/
ISC License
10.45k stars 366 forks source link

Confetti colors not changing #190

Closed sebafernandes closed 1 year ago

sebafernandes commented 1 year ago

Hi, im trying to recreate the "School Pride" effect that you show in the web but i'm having a problem doing it, im kinda new working in js to ts so maybe it's me. The problem is that the colors when the confetti executes are the default and only execute in one side of the screen. This is the function that i use to execute it. Thanks!

` toggleConfetti() { let myCanvas = document.createElement('canvas'); let page = document.getElementById('page'); if (page) { page.appendChild(myCanvas); myCanvas.style.setProperty('position', 'absolute'); myCanvas.style.setProperty('top', '12%'); myCanvas.style.setProperty('width', '100%'); myCanvas.style.setProperty('height', '60%'); } let myConfetti = confetti.create(myCanvas, { resize: true });

myConfetti({
  particleCount: 3,
  angle: 60,
  spread: 45,
  origin: { x: 0 },
  shapes: ['square', 'circle'],
  zIndex: 1000,
  colors: ['#ED1C24'],
  });
myConfetti({
  particleCount: 3,
  angle: 60,
  spread: 45,
  origin: { x: 1 },
  shapes: ['square', 'circle'],
  zIndex: 1000,
  colors: ['#ED1C24'],
  })

myConfetti();

}`

catdad commented 1 year ago

I tried the provided code and it seems to work correctly.

As a side note: the code above probably doesn't do what you are actually trying to do. It fires 3 red confetti on the left side of the canvas, 3 red confetti off of the right side -- that is to say, they are invisible, and then 50 confetti from the middle of the canvas with all default settings, including color. That is what the code asks for, and that is what happens.