canvas-confetti
canvas-confetti copied to clipboard
catdad
🎉 performant confetti animation in the browser
https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-coverage
Example code (limited to more modern browsers): ```javascript 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...
Example code: ```javascript 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,...
It should look more natural... I think there is an issue with the rotation origin.
Lets jus say there's planty space for improvement. Making a simple thing: confetti at cursor poistion is unnecessary painfull. Mayby accept units as px, or % would be an good...
Made a simple change to support half-circle shapes and also changed scalar to support multiple values for different sized confettis
Confetti freezes sometime in ios devices. Especially on Ipads. We keep `useWorkers` to true. We think it is a performance issue. What can we do to make confetti smooth in...
Attempted import error: 'canvas-confetti' does not contain a default export (imported as 'confetti'). in nextjs ```tsx import confetti from "canvas-confetti"; //--------- ** --------- confetti({ particleCount: 100, spread: 70, origin: {...
I was testing my website in Firefox (version 121.0) on macOS (Sonoma 14.2) and noticed that some emojis are rendering incorrectly in the canvas confetti (v1.9.2); please see the screenshot...
