Upgrade 0.5.0 -> 1.0.0

Hi,

Just some feedback. I am using confetti in Angular 8. When I run 0.5.0 it shows up on the full screen. No code changes were made on my side.

• When I updated to 1.0.0 all confetti happens just in a small rectangle in the top left corner 300x 150. I fixed it by adding undefined, { resize: true, useWorker: true } to confetti.create().
• I had to switch to useWorker: false as the UI became unresponsive, not sure why. I attached some screenshots of CPU.

useWorker: false - after confetti fineshed

useWorker: true - after confetti fineshed

 showConfetti() {
    try {
      confetti.create(undefined, { resize: true, useWorker: false })({
          angle: this.random(20, 100),
          spread: this.random(50, 60),
          startVelocity: 80,
          particleCount: this.random(250, 350),
          ticks: 400,
          origin: {
            x: 0.2,
            y: 0.8
          }
        });
    } catch (e) {
    }
  }

[catdad]

I just tried the following:

ng new confetti-test
cd confetti-test
npm i -S canvas-confetti
npm start

I confirmed that this is using Angular 8 and canvas-confetti 1.0.0.

Then, I changed src/app/app/component.ts to include the following (I also tried some variations as well):

import { Component } from '@angular/core';
import confetti, { create } from 'canvas-confetti';

const thing = create(undefined, { useWorker: true, resize: true });

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'confetti-test';
}

setTimeout(() => {
  confetti();
}, 1000);

setTimeout(() => {
  thing({
    angle: 90,
    spread: 60,
    particleCount: 350,
    ticks: 400
  });
}, 3000);

In both cases, the confetti were fullscreen and I did not see any significant CPU usage. I think something non-trivial is going on in your application that I am not sure how to reproduce.

[VaclavElias]

Ohh, if you like javascript I recommend to play with TypeScript. You might like to rewrite confetti to TypeScript 😃 and Angular is then not far away from it. I like canvas-confetti library as it adds up some fun to boring websites. Also this one caught my eye https://auz.github.io/Bug/ but would prefer different kind of entities moving around and even following some path…

Let’s see as the holidays is now here but will be in touch once I have my test app ready 😃