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

Description and use

A discord-card-canvas library was created to generate beautiful cards for a Discord bot, separating logic from design and simplifying maintenance.

Problem

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.

Outcome

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

Workflow

• 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.

Evidence

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

Source

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

Source

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

Source