canvas-confetti - npm Package Compare versions

Comparing version 1.9.0 to 1.9.1

dist/confetti.browser.js

@@ -1,4 +0,6 @@
-// canvas-confetti v1.9.0 built on 2023-10-05T21:53:03.203Z
+// canvas-confetti v1.9.1 built on 2023-11-16T06:04:29.288Z
 !(function (window, module) {
 // source content
+/* globals Map */
+
 (function main(global, module, isWorker, workerSize) {
@@ -17,3 +19,22 @@ var canUseWorker = !!(
   var canUsePaths = typeof Path2D === 'function' && typeof DOMMatrix === 'function';
+  var canDrawBitmap = (function () {
+    // this mostly supports ssr
+    if (!global.OffscreenCanvas) {
+      return false;
+    }
 
+    var canvas = new OffscreenCanvas(1, 1);
+    var ctx = canvas.getContext('2d');
+    ctx.fillRect(0, 0, 1, 1);
+    var bitmap = canvas.transferToImageBitmap();
+
+    try {
+      ctx.createPattern(bitmap, 'no-repeat');
+    } catch (e) {
+      return false;
+    }
+
+    return true;
+  })();
+
   function noop() {}
@@ -36,2 +57,32 @@
 
+  var bitmapMapper = (function (skipTransform, map) {
+    // see https://github.com/catdad/canvas-confetti/issues/209
+    // creating canvases is actually pretty expensive, so we should create a
+    // 1:1 map for bitmap:canvas, so that we can animate the confetti in
+    // a performant manner, but also not store them forever so that we don't
+    // have a memory leak
+    return {
+      transform: function(bitmap) {
+        if (skipTransform) {
+          return bitmap;
+        }
+
+        if (map.has(bitmap)) {
+          return map.get(bitmap);
+        }
+
+        var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(bitmap, 0, 0);
+
+        map.set(bitmap, canvas);
+
+        return canvas;
+      },
+      clear: function () {
+        map.clear();
+      }
+    };
+  })(canDrawBitmap, new Map());
+
   var raf = (function () {
@@ -109,2 +160,5 @@ var TIME = Math.floor(1000 / 60);
             prom = null;
+
+            bitmapMapper.clear();
+
             done();
@@ -384,3 +438,3 @@ resolve();
 
-      var pattern = context.createPattern(fetti.shape.bitmap, 'no-repeat');
+      var pattern = context.createPattern(bitmapMapper.transform(fetti.shape.bitmap), 'no-repeat');
       pattern.setTransform(matrix);
@@ -445,2 +499,3 @@
         context.clearRect(0, 0, size.width, size.height);
+        bitmapMapper.clear();
 
@@ -447,0 +502,0 @@ done();

package.json

 {
   "name": "canvas-confetti",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "performant confetti animation in the browser",
@@ -5,0 +5,0 @@ "main": "src/confetti.js",

README.md

@@ -33,3 +33,3 @@ # [![Canvas Confetti](https://cdn.jsdelivr.net/gh/catdad-experiments/catdad-experiments-org@5ed78b/canvas-confetti/logo.jpg)](https://github.com/catdad/canvas-confetti/)
 ```html
-<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.1/dist/confetti.browser.min.js"></script>
 ```
@@ -36,0 +36,0 @@

src/confetti.js

@@ -0,1 +1,3 @@
+/* globals Map */
+
 (function main(global, module, isWorker, workerSize) {
@@ -14,3 +16,22 @@ var canUseWorker = !!(
   var canUsePaths = typeof Path2D === 'function' && typeof DOMMatrix === 'function';
+  var canDrawBitmap = (function () {
+    // this mostly supports ssr
+    if (!global.OffscreenCanvas) {
+      return false;
+    }
 
+    var canvas = new OffscreenCanvas(1, 1);
+    var ctx = canvas.getContext('2d');
+    ctx.fillRect(0, 0, 1, 1);
+    var bitmap = canvas.transferToImageBitmap();
+
+    try {
+      ctx.createPattern(bitmap, 'no-repeat');
+    } catch (e) {
+      return false;
+    }
+
+    return true;
+  })();
+
   function noop() {}
@@ -33,2 +54,32 @@
 
+  var bitmapMapper = (function (skipTransform, map) {
+    // see https://github.com/catdad/canvas-confetti/issues/209
+    // creating canvases is actually pretty expensive, so we should create a
+    // 1:1 map for bitmap:canvas, so that we can animate the confetti in
+    // a performant manner, but also not store them forever so that we don't
+    // have a memory leak
+    return {
+      transform: function(bitmap) {
+        if (skipTransform) {
+          return bitmap;
+        }
+
+        if (map.has(bitmap)) {
+          return map.get(bitmap);
+        }
+
+        var canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(bitmap, 0, 0);
+
+        map.set(bitmap, canvas);
+
+        return canvas;
+      },
+      clear: function () {
+        map.clear();
+      }
+    };
+  })(canDrawBitmap, new Map());
+
   var raf = (function () {
@@ -106,2 +157,5 @@ var TIME = Math.floor(1000 / 60);
             prom = null;
+
+            bitmapMapper.clear();
+
             done();
@@ -381,3 +435,3 @@ resolve();
 
-      var pattern = context.createPattern(fetti.shape.bitmap, 'no-repeat');
+      var pattern = context.createPattern(bitmapMapper.transform(fetti.shape.bitmap), 'no-repeat');
       pattern.setTransform(matrix);
@@ -442,2 +496,3 @@
         context.clearRect(0, 0, size.width, size.height);
+        bitmapMapper.clear();
 
@@ -444,0 +499,0 @@ done();

No alert changes

Improved metrics

Total package byte prevSize

91487

4.83%

Lines of code

2184

6.43%

No dependency changes