From cb79e38377165b4cb233caa804fadc9272e5e2a8 Mon Sep 17 00:00:00 2001
From: Steffen Kolmer <steffen@kolmer.net>
Date: Wed, 21 Oct 2020 17:04:01 +0200
Subject: [PATCH] Better initialization and check if canvas gets unmounted

---
 .../views/elements/effects/confetti/index.ts      | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/effects/confetti/index.ts b/src/components/views/elements/effects/confetti/index.ts
index 7428651490..b613c32043 100644
--- a/src/components/views/elements/effects/confetti/index.ts
+++ b/src/components/views/elements/effects/confetti/index.ts
@@ -78,9 +78,8 @@ export default class Confetti implements ICanvasEffect {
                     return window.setTimeout(callback, this.options.frameInterval);
                 };
         })();
-        if (this.context === null) {
-            this.context = canvas.getContext('2d');
-        }
+        this.context = canvas.getContext('2d');
+        this.particles = [];
         const count = this.options.maxCount;
         while (this.particles.length < count) {
             this.particles.push(this.resetParticle({} as ConfettiParticle, canvas.width, canvas.height));
@@ -109,9 +108,11 @@ export default class Confetti implements ICanvasEffect {
     }
 
     private runAnimation = (): void => {
+        if (!this.context || !this.context.canvas) {
+            return;
+        }
         if (this.particles.length === 0) {
             this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
-            //animationTimer = null;
         } else {
             const now = Date.now();
             const delta = now - this.lastFrameTime;
@@ -127,6 +128,9 @@ export default class Confetti implements ICanvasEffect {
 
 
     private drawParticles = (context: CanvasRenderingContext2D): void => {
+        if (!this.context || !this.context.canvas) {
+            return;
+        }
         let particle;
         let x; let x2; let y2;
         for (let i = 0; i < this.particles.length; i++) {
@@ -151,6 +155,9 @@ export default class Confetti implements ICanvasEffect {
     }
 
     private updateParticles = () => {
+        if (!this.context || !this.context.canvas) {
+            return;
+        }
         const width = this.context.canvas.width;
         const height = this.context.canvas.height;
         let particle: ConfettiParticle;