catdad/canvas-confetti

🎉 performant confetti animation in the browser

canvas-confetti's Issues

add automated build to test and publish to npm

• add travis build
• run tests in the build
• run linting in the build
• make sure expensive npm install stuff is cached
• publish to npm
• add build badge to README

finalize/document API

better demo page

not working for IE

Not working for IE giving SCRIPT438: Object doesn't support property or method 'ellipse' error.

add `angle` tests

set dpr on the canvas, for optimal quality

function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

// Now this line will be the same size on the page
// but will look sharper on high-DPI devices!
var ctx = setupCanvas(document.querySelector('.my-canvas'));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();

https://www.html5rocks.com/en/tutorials/canvas/hidpi/

fix rotation issue

It should look more natural... I think there is an issue with the rotation origin.

add zIndex to API

add anchors to demos so they can be linked to directly

I need my confetti with in a particular div or component in angular 4 , How can i get that ?

By default it covers entire viewport.

Question - Updates

Hi,

Is it possible to include to your releases, a summary what's new and what's changed?

E.g. like they are doing it here

Thank you :)

`shoots default confetti` test can have 7 colors sometimes instead of 8

this happens when there are less overlapping confetti that do not end up posterizing to black

figure out a callback situation

add option for gravity

handle window resizes

These are actually pretty common on mobile, when the address bar disappears while scrolling (or when someone rotates their phone).

Extra property/css on canvas

This is a feature request regarding the options, it would be good if we can include some extra property or class in the options, so it would be easier to refer them later on or style them.

get images directly from canvas, for better accuracy and timing

use `requestAnimationFrame` or fallback, remove use of prefixed versions

add light mode to the demo page

make sure the module can be browserified

• add tests to make sure it can be required and built
• add distribution artifact ready for the browser
• make the requirable module is the main in package.json
• add step to browserify the module file
• add tests to make sure browserified version works

resize logic should be consistent between default and manual canvases

separate particle physics from rendering

add origin to the api

In terms of page width/height percent

batch confetti draw commands for better performance

https://www.html5rocks.com/en/tutorials/canvas/performance/

NodeJS Support

How about add nodejs canvas support?

Reset added but not working, or i'm stupid ;P

Hi, thanks for added the reset!

I know it uses an instance to reset the confetti but what about the example below?
I use that one to create a confetti canon like animation.

How to stop those?

// do this for 30 seconds
var duration = 30 * 1000;
var end = Date.now() + duration;

(function frame() {
  // launch a few confetti from the left edge
  confetti({
    particleCount: 7,
    angle: 60,
    spread: 55,
    origin: { x: 0 }
  });
  // and launch a few from the right edge
  confetti({
    particleCount: 7,
    angle: 120,
    spread: 55,
    origin: { x: 1 }
  });

  // keep going until we are out of time
  if (Date.now() < end) {
    requestAnimationFrame(frame);
  }
}());

consider adding image shape type

Next to rectangles and ellipses, i'd love to see the option of using images as particle shapes.

One could use it with the standard shape array like ['image', 'image', 'circle'] to accomodate for distribution of a single image next to common shapes.
To get the single image source, it would be one way to just define it in the confetti object like:

confetti: {
  image: {
    source: 'URL',
    options: {}
  }
}

Another way could be defining a set of images in shapes as well: ['images']. Probability should fit the current system, but can be precised in its own child images' property.

To define them we use another object inside confetti:

confetti: {
  images: [
    image: {
      source: 'URL',
      chance: 0.5
      options: {}
    },
    image: {
      source: 'URL',
      chance: 0.5
      options: {}
    }
  ]
}

Thanks for this awesome project which looks by far the best! ✌🥳

consider adding path shape type

Example code (limited to more modern browsers):

function path(context, x, y, scaleX, scaleY, rotation, path) {
  context.save();
  context.translate(x, y);
  context.rotate(rotation);
  context.scale(scaleX, scaleY);
  context.fill(new Path2D(path));
  context.restore();
}
...
path(context, fetti.x + fetti.wobble, fetti.y + fetti.wobble, Math.abs(x2 - x1) * 0.2, Math.abs(y2 - y1) * 0.2, Math.PI / 10 * fetti.wobble, fetti.shape.path);
...
confetti({
    particleCount: 100,
    shapes: ['circle', { type: 'path', path: 'M1 1 h 8 v 8 h -8 Z' }]
});

A path will probably need to provide a width and height or a scale factor, so that the resulting path can be scaled appropriately.

This code has very poor performance. Any acceptable solution will need to solve that.

update to the latest ava

add code coverage to the tests

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage

Confetti movement too fast on 144 Hz monitor (respectively any >60 Hz monitor)

The confetti movement speed is about twice as fast when using a 144 Hz monitor.

To ensure it's a framerate issue, I set my monitor down to 60 Hz; resulting the animation to be shown in it's correct speed.

Please fix & Thank You!

add option for circle shape

I saw this in an animation somewhere. It had confetti as a mixture of circles and squares, and it looked pretty cool.

create shots directory if it does not exist

consider adding custome images

skip drawing particles that are outside the canvas area

add tests

How to use this confetti in Angular 4

Hi guys !
I install this canvas-confetti using npm install.. after that i dont have an idea to use this in my angular project.
how can i import this ?

initialize module with user-supplied canvas

• a whole new set of internal bits is created for each new canvas
  • remove global animationObj
• multiple canvases can exist on the same page and both include animations
• cannot call setCanvasSize on user canvas, as the lib should not be modifying those
• add tests for custom canvas
• add webpage example
• add readme documentation

License missing

Hi,

can you please provide a license file or state under which license this project is published. Thanks and keep up the good work!

support for builds with server-side rendering

When using SSR (for example, with something like Razzle), window cannot be assumed as an existing global, because it does not exist at the time of the build (the code has to be evaluated on the server), so such uses need to reserved for function execution.

/mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:370
}());
 ^
ReferenceError: window is not defined
    at /mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:4:5
    at /mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:31:4
    at Object.<anonymous> (/mnt/d/Git/test/confetti-razzle/node_modules/canvas-confetti/src/confetti.js:370:2)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.canvas-confetti (/mnt/d/Git/test/confetti-razzle/external "canvas-confetti":1:1)

allow confetti to be rendered by OffscreenCanvas

https://developers.google.com/web/updates/2018/08/offscreen-canvas#unblock_main_thread

• the global confetti method should always use a worker when it is capable of doing so without the user having to do anything
• a manually created instance of confetti should have an option controlling whether workers may be used, defaults to false

Broken in older versions of iOS Safari (v. 9.0)

Broken in older versions of iOS Safari (and probably other browsers) that don't support ECMAScript 6 features such as let.

Throws the following error:

---

I was able to fix this issue by simply changing 'let' to 'var' in confetti.module.mjs:

OLD

export let create = module.exports.create;

NEW

export var create = module.exports.create;

Add support for ES module syntax (ESM)

ES module syntax (ESM) is JavaScript’s modern native module system.

Tools like Pika can help.

make promises required

This will allow some internal improvements, especially related to #83 where asynchronous code will need to be kept track of across threads. Promises are ubiquitous now, and users who support browsers without promises will be required to polyfill them.

add a way to stop confetti

add some keywords to the project page

<meta name="keywords" content="comma,separated,keywords">

get the project into jsdelivr

• make sure files work when published to npm
• add content to README

blocked by #23

consider adding char shape type (i.e. emoji)

Example code:

function text(context, x, y, scaleX, scaleY, rotation, char) {
  context.setTransform(scaleX, 0, 0, scaleY, x, y);
  context.rotate(rotation);
  context.textAlign = 'center';
  context.font = 'normal normal 16px auto';
  context.fillText(char, 0, 0);
  context.setTransform(1,0,0,1,0,0);
}
...
text(context, fetti.x, fetti.y, Math.abs(x2 - x1) * 0.2, Math.abs(y2 - y1) * 0.2, Math.PI / 10 * fetti.wobble, fetti.shape.char);
...
confetti({
  shapes: [{ type: 'char', char: '💩' }]
});

I am guessing we'd need an additional font family argument.

This code has very poor performance. Any acceptable solution will need to solve that.

get screenshot images from travis when a build fails

reuse existing canvas if another confetti call is made while animating the previous call