js-confetti - npm Package Compare versions

Comparing version 0.7.1 to 0.8.0-add-custom-canvas-support

dist/es/index.js

@@ -63,9 +63,9 @@ function _classCallCheck(instance, Constructor) {
 var SHAPE_VISIBILITY_TRESHOLD = 100;
-var DEFAULT_CONFETTIES_NUMBER = 250;
-var DEFAULT_EMOJIES_NUMBER = 80;
+var DEFAULT_CONFETTI_NUMBER = 250;
+var DEFAULT_EMOJIS_NUMBER = 40;
 var DEFAULT_CONFETTI_COLORS = ['#fcf403', '#62fc03', '#f4fc03', '#03e7fc', '#03fca5', '#a503fc', '#fc03ad', '#fc03c2'];
 
-function getWindowWidthCoefficient() {
+function getWindowWidthCoefficient(canvasWidth) {
   var HD_SCREEN_WIDTH = 1920;
-  return Math.log(window.innerWidth) / Math.log(HD_SCREEN_WIDTH);
+  return Math.log(canvasWidth) / Math.log(HD_SCREEN_WIDTH);
 }
@@ -81,6 +81,7 @@
         confettiColors = args.confettiColors,
-        emojies = args.emojies,
-        emojiSize = args.emojiSize;
+        emojis = args.emojis,
+        emojiSize = args.emojiSize,
+        canvasWidth = args.canvasWidth;
     var randomConfettiSpeed = generateRandomNumber(MIN_INITIAL_CONFETTI_SPEED, MAX_INITIAL_CONFETTI_SPEED, 3);
-    var initialSpeed = randomConfettiSpeed * getWindowWidthCoefficient();
+    var initialSpeed = randomConfettiSpeed * getWindowWidthCoefficient(canvasWidth);
     this.confettiSpeed = {
@@ -91,3 +92,3 @@ x: initialSpeed,
     this.finalConfettiSpeedX = generateRandomNumber(MIN_FINAL_X_CONFETTI_SPEED, MAX_FINAL_X_CONFETTI_SPEED, 3);
-    this.rotationSpeed = emojies.length ? 0.01 : generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3) * getWindowWidthCoefficient();
+    this.rotationSpeed = emojis.length ? 0.01 : generateRandomNumber(MIN_INITIAL_ROTATION_SPEED, MAX_INITIAL_ROTATION_SPEED, 3) * getWindowWidthCoefficient(canvasWidth);
     this.dragForceCoefficient = generateRandomNumber(MIN_DRAG_FORCE_COEFFICIENT, MAX_DRAG_FORCE_COEFFICIENT, 6);
@@ -113,4 +114,4 @@ this.radius = {
     this.initialPosition = Object.assign({}, shiftedInitialPosition);
-    this.color = emojies.length ? null : generateRandomArrayElement(confettiColors);
-    this.emoji = emojies.length ? generateRandomArrayElement(emojies) : null;
+    this.color = emojis.length ? null : generateRandomArrayElement(confettiColors);
+    this.emoji = emojis.length ? generateRandomArrayElement(emojis) : null;
     this.createdAt = new Date().getTime();
@@ -211,15 +212,18 @@ this.direction = direction;
       confettiRadius = _confettiConfig$confe === void 0 ? INITIAL_SHAPE_RADIUS : _confettiConfig$confe,
-      _confettiConfig$confe2 = confettiConfig.confettiesNumber,
-      confettiesNumber = _confettiConfig$confe2 === void 0 ? confettiConfig.emojies ? DEFAULT_EMOJIES_NUMBER : DEFAULT_CONFETTIES_NUMBER : _confettiConfig$confe2,
+      _confettiConfig$confe2 = confettiConfig.confettiNumber,
+      confettiNumber = _confettiConfig$confe2 === void 0 ? confettiConfig.confettiesNumber || (confettiConfig.emojis ? DEFAULT_EMOJIS_NUMBER : DEFAULT_CONFETTI_NUMBER) : _confettiConfig$confe2,
       _confettiConfig$confe3 = confettiConfig.confettiColors,
       confettiColors = _confettiConfig$confe3 === void 0 ? DEFAULT_CONFETTI_COLORS : _confettiConfig$confe3,
-      _confettiConfig$emoji = confettiConfig.emojies,
-      emojies = _confettiConfig$emoji === void 0 ? [] : _confettiConfig$emoji,
+      _confettiConfig$emoji = confettiConfig.emojis,
+      emojis = _confettiConfig$emoji === void 0 ? confettiConfig.emojies || [] : _confettiConfig$emoji,
       _confettiConfig$emoji2 = confettiConfig.emojiSize,
-      emojiSize = _confettiConfig$emoji2 === void 0 ? INITIAL_EMOJI_SIZE : _confettiConfig$emoji2;
+      emojiSize = _confettiConfig$emoji2 === void 0 ? INITIAL_EMOJI_SIZE : _confettiConfig$emoji2; // deprecate wrong plural forms, used in early releases
+
+  if (confettiConfig.emojies) console.error("emojies argument is deprecated, please use emojis instead");
+  if (confettiConfig.confettiesNumber) console.error("confettiesNumber argument is deprecated, please use confettiNumber instead");
   return {
     confettiRadius: confettiRadius,
-    confettiesNumber: confettiesNumber,
+    confettiNumber: confettiNumber,
     confettiColors: confettiColors,
-    emojies: emojies,
+    emojis: emojis,
     emojiSize: emojiSize
@@ -231,5 +235,7 @@ };
   function JSConfetti() {
+    var jsConfettiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
     _classCallCheck(this, JSConfetti);
 
-    this.canvas = createCanvas();
+    this.canvas = jsConfettiConfig.canvas || createCanvas();
     this.canvasContext = this.canvas.getContext('2d');
@@ -270,39 +276,44 @@ this.shapes = [];
     value: function addConfetti() {
-      var confettiesConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var confettiConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-      var _normalizeConfettiCon = normalizeConfettiConfig(confettiesConfig),
+      var _normalizeConfettiCon = normalizeConfettiConfig(confettiConfig),
           confettiRadius = _normalizeConfettiCon.confettiRadius,
-          confettiesNumber = _normalizeConfettiCon.confettiesNumber,
+          confettiNumber = _normalizeConfettiCon.confettiNumber,
           confettiColors = _normalizeConfettiCon.confettiColors,
-          emojies = _normalizeConfettiCon.emojies,
+          emojis = _normalizeConfettiCon.emojis,
           emojiSize = _normalizeConfettiCon.emojiSize;
 
-      var yPosition = window.innerHeight * 5 / 7;
-      var leftConfettiesPosition = {
+      var dpr = window.devicePixelRatio;
+      var canvasWidth = this.canvas.width / dpr;
+      var canvasHeight = this.canvas.height / dpr;
+      var yPosition = canvasHeight * 5 / 7;
+      var leftConfettiPosition = {
         x: 0,
         y: yPosition
       };
-      var rightConfettiesPosition = {
-        x: window.innerWidth,
+      var rightConfettiPosition = {
+        x: canvasWidth,
         y: yPosition
       };
 
-      for (var i = 0; i < confettiesNumber / 2; i++) {
+      for (var i = 0; i < confettiNumber / 2; i++) {
         this.shapes.push(new ConfettiShape({
-          initialPosition: leftConfettiesPosition,
+          initialPosition: leftConfettiPosition,
           direction: 'right',
           confettiRadius: confettiRadius,
           confettiColors: confettiColors,
-          confettiesNumber: confettiesNumber,
-          emojies: emojies,
-          emojiSize: emojiSize
+          confettiNumber: confettiNumber,
+          emojis: emojis,
+          emojiSize: emojiSize,
+          canvasWidth: canvasWidth
         }));
         this.shapes.push(new ConfettiShape({
-          initialPosition: rightConfettiesPosition,
+          initialPosition: rightConfettiPosition,
           direction: 'left',
           confettiRadius: confettiRadius,
           confettiColors: confettiColors,
-          confettiesNumber: confettiesNumber,
-          emojies: emojies,
-          emojiSize: emojiSize
+          confettiNumber: confettiNumber,
+          emojis: emojis,
+          emojiSize: emojiSize,
+          canvasWidth: canvasWidth
         }));
@@ -309,0 +320,0 @@ }

dist/js-confetti.browser.js

@@ -1,1 +0,1 @@
-var JSConfetti=function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function e(t,e,n){return e&&i(t.prototype,e),n&&i(t,n),t}function n(t){return+t.replace(/px/,"")}function o(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,n=Math.random()*(i-t)+t;return Math.floor(n*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[o(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(){return Math.log(window.innerWidth)/Math.log(1920)}var h=function(){function i(e){t(this,i);var n=e.initialPosition,a=e.direction,h=e.confettiRadius,c=e.confettiColors,d=e.emojies,l=e.emojiSize,u=o(.9,1.7,3)*r();this.confettiSpeed={x:u,y:u},this.finalConfettiSpeedX=o(.2,.6,3),this.rotationSpeed=d.length?.01:o(.03,.07,3)*r(),this.dragForceCoefficient=o(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?o(0,.2,3):o(-.2,0,3),this.emojiSize=l,this.emojiRotationAngle=o(0,2*Math.PI),this.radiusYUpdateDirection="down";var f="left"===a?o(82,15)*Math.PI/180:o(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(f)),this.absSin=Math.abs(Math.sin(f));var p=o(-150,0),v={x:n.x+("left"===a?-p:p)*this.absCos,y:n.y-p*this.absSin};this.currentPosition=Object.assign({},v),this.initialPosition=Object.assign({},v),this.color=d.length?null:s(c),this.emoji=d.length?s(d):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,n=this.color,o=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=this.emojiSize,h=window.devicePixelRatio;n?(t.fillStyle=n,t.beginPath(),t.ellipse(i.x*h,i.y*h,e.x*h,e.y*h,s,0,2*Math.PI),t.fill()):o&&(t.font="".concat(r,"px serif"),t.save(),t.translate(h*i.x,h*i.y),t.rotate(a),t.textAlign="center",t.fillText(o,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,n=this.dragForceCoefficient,o=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,c=i-r;e.x>o&&(this.confettiSpeed.x-=n*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*c+.00125*Math.pow(c,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function c(t){var i=t.confettiRadius,e=void 0===i?6:i,n=t.confettiesNumber,o=void 0===n?t.emojies?80:250:n,s=t.confettiColors,r=void 0===s?a:s,h=t.emojies,c=void 0===h?[]:h,d=t.emojiSize;return{confettiRadius:e,confettiesNumber:o,confettiColors:r,emojies:c,emojiSize:void 0===d?80:d}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,o,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),o=n(e.getPropertyValue("width")),s=n(e.getPropertyValue("height")),t.setAttribute("width",(o*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,c=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(c)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=c(t),e=i.confettiRadius,n=i.confettiesNumber,o=i.confettiColors,s=i.emojies,a=i.emojiSize,r=5*window.innerHeight/7,d={x:0,y:r},l={x:window.innerWidth,y:r},u=0;u<n/2;u++)this.shapes.push(new h({initialPosition:d,direction:"right",confettiRadius:e,confettiColors:o,confettiesNumber:n,emojies:s,emojiSize:a})),this.shapes.push(new h({initialPosition:l,direction:"left",confettiRadius:e,confettiColors:o,confettiesNumber:n,emojies:s,emojiSize:a}))}}]),i}()}();
+var JSConfetti=function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var o=i[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t,e,o){return e&&i(t.prototype,e),o&&i(t,o),t}function o(t){return+t.replace(/px/,"")}function n(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=Math.random()*(i-t)+t;return Math.floor(o*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[n(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(t){return Math.log(t)/Math.log(1920)}var h=function(){function i(e){t(this,i);var o=e.initialPosition,a=e.direction,h=e.confettiRadius,c=e.confettiColors,d=e.emojis,l=e.emojiSize,u=e.canvasWidth,f=n(.9,1.7,3)*r(u);this.confettiSpeed={x:f,y:f},this.finalConfettiSpeedX=n(.2,.6,3),this.rotationSpeed=d.length?.01:n(.03,.07,3)*r(u),this.dragForceCoefficient=n(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?n(0,.2,3):n(-.2,0,3),this.emojiSize=l,this.emojiRotationAngle=n(0,2*Math.PI),this.radiusYUpdateDirection="down";var p="left"===a?n(82,15)*Math.PI/180:n(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(p)),this.absSin=Math.abs(Math.sin(p));var m=n(-150,0),v={x:o.x+("left"===a?-m:m)*this.absCos,y:o.y-m*this.absSin};this.currentPosition=Object.assign({},v),this.initialPosition=Object.assign({},v),this.color=d.length?null:s(c),this.emoji=d.length?s(d):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,o=this.color,n=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=this.emojiSize,h=window.devicePixelRatio;o?(t.fillStyle=o,t.beginPath(),t.ellipse(i.x*h,i.y*h,e.x*h,e.y*h,s,0,2*Math.PI),t.fill()):n&&(t.font="".concat(r,"px serif"),t.save(),t.translate(h*i.x,h*i.y),t.rotate(a),t.textAlign="center",t.fillText(n,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,o=this.dragForceCoefficient,n=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,c=i-r;e.x>n&&(this.confettiSpeed.x-=o*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*c+.00125*Math.pow(c,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function c(){var t=document.createElement("canvas");return t.style.position="fixed",t.style.width="100%",t.style.height="100%",t.style.top="0",t.style.left="0",t.style.zIndex="1000",t.style.pointerEvents="none",document.body.appendChild(t),t}function d(t){var i=t.confettiRadius,e=void 0===i?6:i,o=t.confettiNumber,n=void 0===o?t.confettiesNumber||(t.emojis?40:250):o,s=t.confettiColors,r=void 0===s?a:s,h=t.emojis,c=void 0===h?t.emojies||[]:h,d=t.emojiSize,l=void 0===d?80:d;return t.emojies&&console.error("emojies argument is deprecated, please use emojis instead"),t.confettiesNumber&&console.error("confettiesNumber argument is deprecated, please use confettiNumber instead"),{confettiRadius:e,confettiNumber:n,confettiColors:r,emojis:c,emojiSize:l}}return function(){function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.canvas=e.canvas||c(),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,n,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),n=o(e.getPropertyValue("width")),s=o(e.getPropertyValue("height")),t.setAttribute("width",(n*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,c=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(c)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=d(t),e=i.confettiRadius,o=i.confettiNumber,n=i.confettiColors,s=i.emojis,a=i.emojiSize,r=window.devicePixelRatio,c=this.canvas.width/r,l=this.canvas.height/r,u=5*l/7,f={x:0,y:u},p={x:c,y:u},m=0;m<o/2;m++)this.shapes.push(new h({initialPosition:f,direction:"right",confettiRadius:e,confettiColors:n,confettiNumber:o,emojis:s,emojiSize:a,canvasWidth:c})),this.shapes.push(new h({initialPosition:p,direction:"left",confettiRadius:e,confettiColors:n,confettiNumber:o,emojis:s,emojiSize:a,canvasWidth:c}))}}]),i}()}();

dist/js-confetti.min.js

@@ -1,1 +0,1 @@
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var o=i[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t,e,o){return e&&i(t.prototype,e),o&&i(t,o),t}function o(t){return+t.replace(/px/,"")}function n(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=Math.random()*(i-t)+t;return Math.floor(o*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[n(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(){return Math.log(window.innerWidth)/Math.log(1920)}var h=function(){function i(e){t(this,i);var o=e.initialPosition,a=e.direction,h=e.confettiRadius,d=e.confettiColors,c=e.emojies,l=e.emojiSize,f=n(.9,1.7,3)*r();this.confettiSpeed={x:f,y:f},this.finalConfettiSpeedX=n(.2,.6,3),this.rotationSpeed=c.length?.01:n(.03,.07,3)*r(),this.dragForceCoefficient=n(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?n(0,.2,3):n(-.2,0,3),this.emojiSize=l,this.emojiRotationAngle=n(0,2*Math.PI),this.radiusYUpdateDirection="down";var u="left"===a?n(82,15)*Math.PI/180:n(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(u)),this.absSin=Math.abs(Math.sin(u));var p=n(-150,0),m={x:o.x+("left"===a?-p:p)*this.absCos,y:o.y-p*this.absSin};this.currentPosition=Object.assign({},m),this.initialPosition=Object.assign({},m),this.color=c.length?null:s(d),this.emoji=c.length?s(c):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,o=this.color,n=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=this.emojiSize,h=window.devicePixelRatio;o?(t.fillStyle=o,t.beginPath(),t.ellipse(i.x*h,i.y*h,e.x*h,e.y*h,s,0,2*Math.PI),t.fill()):n&&(t.font="".concat(r,"px serif"),t.save(),t.translate(h*i.x,h*i.y),t.rotate(a),t.textAlign="center",t.fillText(n,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,o=this.dragForceCoefficient,n=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,d=i-r;e.x>n&&(this.confettiSpeed.x-=o*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*d+.00125*Math.pow(d,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function d(t){var i=t.confettiRadius,e=void 0===i?6:i,o=t.confettiesNumber,n=void 0===o?t.emojies?80:250:o,s=t.confettiColors,r=void 0===s?a:s,h=t.emojies,d=void 0===h?[]:h,c=t.emojiSize;return{confettiRadius:e,confettiesNumber:n,confettiColors:r,emojies:d,emojiSize:void 0===c?80:c}}return function(){function i(){var e;t(this,i),this.canvas=((e=document.createElement("canvas")).style.position="fixed",e.style.width="100%",e.style.height="100%",e.style.top="0",e.style.left="0",e.style.zIndex="1000",e.style.pointerEvents="none",document.body.appendChild(e),e),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,n,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),n=o(e.getPropertyValue("width")),s=o(e.getPropertyValue("height")),t.setAttribute("width",(n*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,d=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(d)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=d(t),e=i.confettiRadius,o=i.confettiesNumber,n=i.confettiColors,s=i.emojies,a=i.emojiSize,r=5*window.innerHeight/7,c={x:0,y:r},l={x:window.innerWidth,y:r},f=0;f<o/2;f++)this.shapes.push(new h({initialPosition:c,direction:"right",confettiRadius:e,confettiColors:n,confettiesNumber:o,emojies:s,emojiSize:a})),this.shapes.push(new h({initialPosition:l,direction:"left",confettiRadius:e,confettiColors:n,confettiesNumber:o,emojies:s,emojiSize:a}))}}]),i}()}));
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).jsConfetti=i()}(this,(function(){"use strict";function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}function i(t,i){for(var e=0;e<i.length;e++){var o=i[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t,e,o){return e&&i(t.prototype,e),o&&i(t,o),t}function o(t){return+t.replace(/px/,"")}function n(t,i){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,o=Math.random()*(i-t)+t;return Math.floor(o*Math.pow(10,e))/Math.pow(10,e)}function s(t){return t[n(0,t.length)]}var a=["#fcf403","#62fc03","#f4fc03","#03e7fc","#03fca5","#a503fc","#fc03ad","#fc03c2"];function r(t){return Math.log(t)/Math.log(1920)}var h=function(){function i(e){t(this,i);var o=e.initialPosition,a=e.direction,h=e.confettiRadius,c=e.confettiColors,d=e.emojis,l=e.emojiSize,u=e.canvasWidth,f=n(.9,1.7,3)*r(u);this.confettiSpeed={x:f,y:f},this.finalConfettiSpeedX=n(.2,.6,3),this.rotationSpeed=d.length?.01:n(.03,.07,3)*r(u),this.dragForceCoefficient=n(5e-4,9e-4,6),this.radius={x:h,y:h},this.initialRadius=h,this.rotationAngle="left"===a?n(0,.2,3):n(-.2,0,3),this.emojiSize=l,this.emojiRotationAngle=n(0,2*Math.PI),this.radiusYUpdateDirection="down";var p="left"===a?n(82,15)*Math.PI/180:n(-15,-82)*Math.PI/180;this.absCos=Math.abs(Math.cos(p)),this.absSin=Math.abs(Math.sin(p));var m=n(-150,0),v={x:o.x+("left"===a?-m:m)*this.absCos,y:o.y-m*this.absSin};this.currentPosition=Object.assign({},v),this.initialPosition=Object.assign({},v),this.color=d.length?null:s(c),this.emoji=d.length?s(d):null,this.createdAt=(new Date).getTime(),this.direction=a}return e(i,[{key:"draw",value:function(t){var i=this.currentPosition,e=this.radius,o=this.color,n=this.emoji,s=this.rotationAngle,a=this.emojiRotationAngle,r=this.emojiSize,h=window.devicePixelRatio;o?(t.fillStyle=o,t.beginPath(),t.ellipse(i.x*h,i.y*h,e.x*h,e.y*h,s,0,2*Math.PI),t.fill()):n&&(t.font="".concat(r,"px serif"),t.save(),t.translate(h*i.x,h*i.y),t.rotate(a),t.textAlign="center",t.fillText(n,0,0),t.restore())}},{key:"updatePosition",value:function(t,i){var e=this.confettiSpeed,o=this.dragForceCoefficient,n=this.finalConfettiSpeedX,s=this.radiusYUpdateDirection,a=this.rotationSpeed,r=this.createdAt,h=this.direction,c=i-r;e.x>n&&(this.confettiSpeed.x-=o*t),this.currentPosition.x+=e.x*("left"===h?-this.absCos:this.absCos)*t,this.currentPosition.y=this.initialPosition.y-e.y*this.absSin*c+.00125*Math.pow(c,2)/2,this.rotationSpeed-=this.emoji?1e-4:1e-5*t,this.rotationSpeed<0&&(this.rotationSpeed=0),this.emoji?this.emojiRotationAngle+=this.rotationSpeed*t%(2*Math.PI):"down"===s?(this.radius.y-=t*a,this.radius.y<=0&&(this.radius.y=0,this.radiusYUpdateDirection="up")):(this.radius.y+=t*a,this.radius.y>=this.initialRadius&&(this.radius.y=this.initialRadius,this.radiusYUpdateDirection="down"))}},{key:"getIsVisibleOnCanvas",value:function(t){return this.currentPosition.y<t+100}}]),i}();function c(){var t=document.createElement("canvas");return t.style.position="fixed",t.style.width="100%",t.style.height="100%",t.style.top="0",t.style.left="0",t.style.zIndex="1000",t.style.pointerEvents="none",document.body.appendChild(t),t}function d(t){var i=t.confettiRadius,e=void 0===i?6:i,o=t.confettiNumber,n=void 0===o?t.confettiesNumber||(t.emojis?40:250):o,s=t.confettiColors,r=void 0===s?a:s,h=t.emojis,c=void 0===h?t.emojies||[]:h,d=t.emojiSize,l=void 0===d?80:d;return t.emojies&&console.error("emojies argument is deprecated, please use emojis instead"),t.confettiesNumber&&console.error("confettiesNumber argument is deprecated, please use confettiNumber instead"),{confettiRadius:e,confettiNumber:n,confettiColors:r,emojis:c,emojiSize:l}}return function(){function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};t(this,i),this.canvas=e.canvas||c(),this.canvasContext=this.canvas.getContext("2d"),this.shapes=[],this.lastUpdated=(new Date).getTime(),this.iterationIndex=0,this.loop=this.loop.bind(this),requestAnimationFrame(this.loop)}return e(i,[{key:"loop",value:function(){var t,i,e,n,s,a=this;t=this.canvas,i=window.devicePixelRatio,e=getComputedStyle(t),n=o(e.getPropertyValue("width")),s=o(e.getPropertyValue("height")),t.setAttribute("width",(n*i).toString()),t.setAttribute("height",(s*i).toString());var r=(new Date).getTime(),h=r-this.lastUpdated,c=this.canvas.offsetHeight;this.shapes.forEach((function(t){t.updatePosition(h,r),t.draw(a.canvasContext)})),this.iterationIndex%100==0&&(this.shapes=this.shapes.filter((function(t){return t.getIsVisibleOnCanvas(c)}))),this.lastUpdated=r,this.iterationIndex++,requestAnimationFrame(this.loop)}},{key:"addConfetti",value:function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=d(t),e=i.confettiRadius,o=i.confettiNumber,n=i.confettiColors,s=i.emojis,a=i.emojiSize,r=window.devicePixelRatio,c=this.canvas.width/r,l=this.canvas.height/r,u=5*l/7,f={x:0,y:u},p={x:c,y:u},m=0;m<o/2;m++)this.shapes.push(new h({initialPosition:f,direction:"right",confettiRadius:e,confettiColors:n,confettiNumber:o,emojis:s,emojiSize:a,canvasWidth:c})),this.shapes.push(new h({initialPosition:p,direction:"left",confettiRadius:e,confettiColors:n,confettiNumber:o,emojis:s,emojiSize:a,canvasWidth:c}))}}]),i}()}));

package.json

 {
   "name": "js-confetti",
-  "version": "0.7.1",
+  "version": "0.8.0-add-custom-canvas-support",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "JS Confetti library with zero dependencies, works without any config, TS typings included, adapts to user screen",

README.md

@@ -12,3 +12,3 @@
 
-💥 Supports emojies as confetties<br/>
+💥 Supports emojis as confetti<br/>
 ⚡️ Zero dependencies used<br/>
@@ -51,9 +51,9 @@ 🦄 Works without any config, yet configurable<br/>
 
-## Customise confetties
+## Customise confetti
 
-Use emojies as confetties:
+Use emojis as confetti:
 
 ```js
 jsConfetti.addConfetti({
-  { emojies: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] },
+   emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
 })
@@ -64,3 +64,3 @@ ```
 
-Customize confetties colors:
+Customize confetti colors:
 
@@ -77,3 +77,3 @@ ```js
 
-Customize confetties radius:
+Customize confetti radius:
 
@@ -88,3 +88,3 @@ ```js
 
-Customize confetties number:
+Customize confetti number:
 
@@ -94,3 +94,3 @@ ```js
   confettiRadius: 6,
-  confettiesNumber: 500,
+  confettiNumber: 500,
 })
@@ -105,5 +105,5 @@ ```
 jsConfetti.addConfetti({
-  emojies: ['🦄'],
+  emojis: ['🦄'],
   emojiSize: 100,
-  confettiesNumber: 30,
+  confettiNumber: 30,
 })
@@ -110,0 +110,0 @@ ```

typings/index.d.ts

@@ -8,5 +8,5 @@ // Type definitions for js-confetti
   confettiRadius?: number,
-  confettiesNumber?: number,
+  confettiNumber?: number,
   confettiColors?: string[],
-  emojies?: string[],
+  emojis?: string[],
 }
@@ -13,0 +13,0 @@

No alert changes

Improved metrics

Total package byte prevSize

28936

increased by5.31%

Lines of code

343

increased by3.63%

No dependency changes