catdad / canvas-confetti

🎉 performant confetti animation in the browser
https://catdad.github.io/canvas-confetti/
ISC License
10.18k stars 358 forks source link

My icons are always blurry, looking forward to a solution #231

Open NVO-2021 opened 2 months ago

NVO-2021 commented 2 months ago
image

System: macOS 14.5 Chip: Apple M2

As shown in the picture, my configuration parameters are:

        // script.js
        let duration = 5 * 1000; // 5 seconds
        let end = Date.now() + duration;
        (function frame() {
            console.log("do.invoke.confetti", 777)

            var defaultOptions = {
                scalar: 2,
                flat: true,
                // flat: false,
            }

            const shapes = [
                // confetti.shapeFromText({text: '🎉', }),
                // confetti.shapeFromText({text: '️🎄',}),
                // confetti.shapeFromText({text: '💰',}),
                // confetti.shapeFromText({text: '🥇',}),
                confetti.shapeFromText({text: '💴',}),

            ];
            confetti({
                ...defaultOptions,
                particleCount: 1,
                angle: 60,
                spread: 55,
                origin: {x: 0},
                shapes: [...shapes]
            });
            confetti({
                ...defaultOptions,
                particleCount: 1,
                angle: 120,
                spread: 55,
                origin: {x: 1},
                shapes: [...shapes]
            });

            if (Date.now() < end) {
                requestAnimationFrame(frame);
            }
        }());
    })
Zatheos commented 2 months ago

You need to provide the scalar argument when you call confetti.shapeFromText() So try doing something like this: confetti.shapeFromText({text: '💴', scalar: 2}) This is used to determine how large the text is rendered to the canvas when it's being turned into a bitmap image. Without this you're rendering the text (or emoji) very small and then scaling it up so it ends up blurry.