How I made it easier to generate beautiful cards for my Discord bot

Описание и применение

Создана библиотека discord-card-canvas, позволяющая генерировать красивые карточки для Discord‑бота, отделяя логику от дизайна и упрощая поддержку.

Задача

Generating multiple styled cards (rank, welcome, level‑up) for a Discord bot required writing custom canvas logic each time, making design changes hard to test and deploy.

Результат

The bot can now generate high‑quality, customizable cards quickly, separating design from logic and simplifying maintenance.

Рабочий процесс

• 1. Install discord-card-canvas via npm. 2. Prepare avatar image and font files. 3. Load fonts with loadFonts(). 4. Create a builder function (e.g., createRankCard) that accepts nickname, avatarURL, level, rank, xp, requiredXP. 5. In a separate script, encode avatar.png to base64 and call createRankCard with demo data. 6. Write the resulting image buffer to a PNG file. 7. Use the same builder in Discord command handlers to generate cards on demand.

Доказательства

Drawing a single card with Canvas is fairly straightforward. Maintaining several types of cards means handling avatars, fonts, long names, backgrounds, and user settings.

Источник

I wanted a tool that could handle this without making me write the drawing logic from scratch each time.

Источник

Now I can change card designs and check the results separately from the bot. That makes small changes noticeably easier.

Источник