
Company News
Socket Named Top Sales Organization by RepVue
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.
koja-canvas-cards
Advanced tools
A Node.js module for generating various Discord-style image cards using the canvas library.
This document provides detailed usage instructions and examples for all card generation functions available in the canvas-cards package.
To install the package, use npm:
npm install canvas-cards
Prerequisites:
This package relies on the canvas library, which has some system-level dependencies. Please ensure you have the following installed on your system:
sudo apt-get update sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev ```
brew install pkg-config cairo pango libjpeg giflib librsvg ```
canvas on Windows can be more complex. It is recommended to use Windows Subsystem for Linux (WSL) or a Docker environment. If you must install directly on Windows, refer to the node-canvas wiki for detailed instructions.Many card classes inherit from a Base class (or similar) and share common methods for setting properties like avatar, username, background, etc. These methods typically return the instance of the class, allowing for method chaining.
Here are some common methods you might encounter:
.setAvatar(url): Sets the avatar image URL..setUsername(name): Sets the username text..setGuildName(name): Sets the guild/server name text..setMemberCount(count): Sets the member count text..setBackground(url): Sets the background image URL..setGuildIcon(url): Sets the guild icon image URL..setDiscriminator(value): Sets the user discriminator (e.g., "0001")..setColor(variable, value): Sets a specific color variable (e.g., colorUsername, colorTitle)..setText(variable, value): Sets a specific text variable (e.g., textMessage)..setOpacity(variable, value): Sets the opacity for a specific element..toAttachment(): Generates the card and returns a Canvas object. You'll typically call .toBuffer() on this to get the image data..toBuild(): Similar to toAttachment(), but might be used by some specific card types.This card generates a welcome message for new members joining a guild.
Class: CanvasCards.Welcome
Methods:
setAvatar, setUsername, setGuildName, setMemberCount, setBackground, setGuildIcon, setDiscriminator.textTitle (WELCOME), textMessage ({server}), colorTitle (#03A9F4), assent (default image URL).Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateWelcomeCard() {
const image = await new CanvasCards.Welcome()
.setUsername("NewMember")
.setGuildName("AwesomeServer")
.setGuildIcon("https://example.com/guild-icon.png") // Optional
.setMemberCount("123")
.setAvatar("https://example.com/avatar.png")
.setBackground("https://example.com/background.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./welcome.png", data);
console.log("Welcome card generated: welcome.png");
}
generateWelcomeCard();
A variation of the welcome card.
Class: CanvasCards.Welcome2
Methods:
setBg (for background), setGroupname (for guild name), setMember (for member count).Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateWelcome2Card() {
const image = await new CanvasCards.Welcome2()
.setAvatar("https://example.com/avatar.png")
.setUsername("AnotherUser")
.setBg("https://example.com/another-background.jpg")
.setGroupname("MyCommunity")
.setMember("456")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./welcome2.png", data);
console.log("Welcome2 card generated: welcome2.png");
}
generateWelcome2Card();
Another variation of the welcome card.
Class: CanvasCards.Welcome3
Methods:
Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateWelcome3Card() {
const image = await new CanvasCards.Welcome3()
.setAvatar("https://example.com/avatar.png")
.setUsername("ThirdUser")
.setGuildName("TheThirdPlace")
.setMemberCount("789")
.setBackground("https://example.com/third-background.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./welcome3.png", data);
console.log("Welcome3 card generated: welcome3.png");
}
generateWelcome3Card();
Generates a goodbye message for departing members.
Class: CanvasCards.Goodbye
Methods:
textTitle (GOODBYE), textMessage ({server}), colorTitle (#df0909), assent (default image URL).Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGoodbyeCard() {
const image = await new CanvasCards.Goodbye()
.setUsername("OldMember")
.setGuildName("LeftServer")
.setAvatar("https://example.com/old-avatar.png")
.setBackground("https://example.com/goodbye-background.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./goodbye.png", data);
console.log("Goodbye card generated: goodbye.png");
}
generateGoodbyeCard();
A variation of the goodbye card.
Class: CanvasCards.Goodbye2
Methods:
Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGoodbye2Card() {
const image = await new CanvasCards.Goodbye2()
.setUsername("AnotherLeft")
.setGuildName("AnotherServer")
.setAvatar("https://example.com/another-left-avatar.png")
.setBackground("https://example.com/another-goodbye-background.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./goodbye2.png", data);
console.log("Goodbye2 card generated: goodbye2.png");
}
generateGoodbye2Card();
Another variation of the goodbye card.
Class: CanvasCards.Goodbye3
Methods:
Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGoodbye3Card() {
const image = await new CanvasCards.Goodbye3()
.setUsername("FinalDepart")
.setGuildName("FinalServer")
.setAvatar("https://example.com/final-avatar.png")
.setBackground("https://example.com/final-goodbye-background.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./goodbye3.png", data);
console.log("Goodbye3 card generated: goodbye3.png");
}
generateGoodbye3Card();
Generates a user rank card.
Class: CanvasCards.Rank (from src/rank/Rank.js)
Methods:
setAvatar(url): Sets the user's avatar.setUsername(name): Sets the user's name.setBg(url): Sets the background image.setNeedxp(xp): Sets the XP needed for the next level.setCurrxp(xp): Sets the current XP.setLevel(level): Sets the user's level.setRank(rankImageUrl): Sets an image representing the user's rank.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateRankCard() {
const image = await new CanvasCards.Rank()
.setAvatar("https://i.ibb.co/1s8T3sY/48f7ce63c7aa.jpg")
.setUsername("Lingz")
.setBg("https://i.ibb.co/4YBNyvP/images-76.jpg")
.setNeedxp("1000")
.setCurrxp("100")
.setLevel("6")
.setRank("https://i.ibb.co/Wn9cvnv/FABLED.png")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./rank.png", data);
console.log("Rank card generated: rank.png");
}
generateRankCard();
Another rank card, potentially with different styling or features.
Class: CanvasCards.Rank (from src/update/Rank.js)
Methods:
src/update/Rank.js for specific methods)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateUpdateRankCard() {
// Usage details for src/update/Rank.js would go here
// For now, assuming similar methods to the other Rank card
const image = await new CanvasCards.Rank()
.setAvatar("https://example.com/avatar.png")
.setUsername("UpdatedRanker")
.setBg("https://example.com/updated-rank-background.jpg")
.setLevel("10")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./update-rank.png", data);
console.log("Update Rank card generated: update-rank.png");
}
generateUpdateRankCard();
These cards likely generate graphical effects or stylized images.
Class: CanvasCards.Gura
Methods:
src/gfx/Gura.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGuraCard() {
const image = await new CanvasCards.Gura()
// Add Gura specific methods here
.toAttachment(); // or .toBuild()
const data = image.toBuffer();
fs.writeFileSync("./gura.png", data);
console.log("Gura card generated: gura.png");
}
generateGuraCard();
These are likely variations of graphical effect cards.
Classes: CanvasCards.Gfx1, CanvasCards.Gfx2, CanvasCards.Gfx3, CanvasCards.Gfx4, CanvasCards.Gfx5
Methods:
src/gfx/GfxN.js file)Example (Gfx1):
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGfx1Card() {
const image = await new CanvasCards.Gfx1()
// Add Gfx1 specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./gfx1.png", data);
console.log("Gfx1 card generated: gfx1.png");
}
generateGfx1Card();
These cards appear to be themed or custom designs.
Class: CanvasCards.Lickanime
Methods:
src/linz/Lick.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateLickanimeCard() {
const image = await new CanvasCards.Lickanime()
// Add Lickanime specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./lickanime.png", data);
console.log("Lickanime card generated: lickanime.png");
}
generateLickanimeCard();
Class: CanvasCards.Burn
Methods:
setAvatar(url): Sets the avatar image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateBurnCard() {
const image = await new CanvasCards.Burn()
.setAvatar("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwXmOgfrrGKdaGbnisffjJaUM2eU2izUBf3w&usqp=CAU")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./burn.png", data);
console.log("Burn card generated: burn.png");
}
generateBurnCard();
Classes: CanvasCards.Hacker1, CanvasCards.Hacker2, CanvasCards.Hacker3
Methods:
src/linz/HackerN.js file)Example (Hacker1):
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateHacker1Card() {
const image = await new CanvasCards.Hacker1()
// Add Hacker1 specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./hacker1.png", data);
console.log("Hacker1 card generated: hacker1.png");
}
generateHacker1Card();
Class: CanvasCards.Patrick
Methods:
setAvatar(url): Sets the avatar image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generatePatrickCard() {
const image = await new CanvasCards.Patrick()
.setAvatar("https://i.ibb.co/xG8L4mz/images.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./patrick.png", data);
console.log("Patrick card generated: patrick.png");
}
generatePatrickCard();
These cards might offer unique or more elaborate designs.
Class: CanvasCards.Spo
Methods:
src/premium/Spo.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateSpoCard() {
const image = await new CanvasCards.Spo()
// Add Spo specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./spo.png", data);
console.log("Spo card generated: spo.png");
}
generateSpoCard();
Likely a
level-up card.
Class: CanvasCards.Up
Methods:
setAvatar(url): Sets the avatar image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateLevelUpCard() {
const image = await new CanvasCards.Up()
.setAvatar("https://i.ibb.co/1s8T3sY/48f7ce63c7aa.jpg")
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./levelup.png", data);
console.log("Level Up card generated: levelup.png");
}
generateLevelUpCard();
Class: CanvasCards.Bag
Methods:
src/premium/Bag.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateBagCard() {
const image = await new CanvasCards.Bag()
// Add Bag specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./bag.png", data);
console.log("Bag card generated: bag.png");
}
generateBagCard();
Class: CanvasCards.Xnxx
Methods:
src/premium/Xnxx.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateXnxxCard() {
const image = await new CanvasCards.Xnxx()
// Add Xnxx specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./xnxx.png", data);
console.log("Xnxx card generated: xnxx.png");
}
generateXnxxCard();
Class: CanvasCards.Ship
Methods:
src/premium/Ship.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateShipCard() {
const image = await new CanvasCards.Ship()
// Add Ship specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./ship.png", data);
console.log("Ship card generated: ship.png");
}
generateShipCard();
Class: CanvasCards.Gay
Methods:
src/premium/Gay.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateGayCard() {
const image = await new CanvasCards.Gay()
// Add Gay specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./gay.png", data);
console.log("Gay card generated: gay.png");
}
generateGayCard();
These cards are likely part of an update or offer specific functionalities.
Class: CanvasCards.Inv
Methods:
src/update/Inv.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateInvCard() {
const image = await new CanvasCards.Inv()
// Add Inv specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./inv.png", data);
console.log("Inv card generated: inv.png");
}
generateInvCard();
Class: CanvasCards.Horny
Methods:
setAvatar(url): Sets the avatar image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateHornyCard() {
const image = await new CanvasCards.Horny()
.setAvatar("https://i.ibb.co/1s8T3sY/48f7ce63c7aa.jpg")
.toBuild();
const data = image.toBuffer();
fs.writeFileSync("./horny.png", data);
console.log("Horny card generated: horny.png");
}
generateHornyCard();
Class: CanvasCards.Vs
Methods:
src/update/Vs.js)Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateVsCard() {
const image = await new CanvasCards.Vs()
// Add Vs specific methods here
.toAttachment();
const data = image.toBuffer();
fs.writeFileSync("./vs.png", data);
console.log("Vs card generated: vs.png");
}
generateVsCard();
Class: CanvasCards.Bonk
Methods:
setAvatar1(url): Sets the first avatar image URL.setAvatar2(url): Sets the second avatar image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateBonkCard() {
const image = await new CanvasCards.Bonk()
.setAvatar1("https://i.ibb.co/G5mJZxs/rin.jpg")
.setAvatar2("https://i.ibb.co/BZgRzh0/IMG-20210621-WA0000.jpg")
.toBuild();
const data = image.toBuffer();
fs.writeFileSync("./bonk.png", data);
console.log("Bonk card generated: bonk.png");
}
generateBonkCard();
Class: CanvasCards.Jo
Methods:
setImage(url): Sets the main image URL.Example:
const CanvasCards = require("canvas-cards");
const fs = require("fs");
async function generateJoCard() {
const image = await new CanvasCards.Jo()
.setImage("https://i.ibb.co/xG8L4mz/images.jpg")
.toBuild();
const data = image.toBuffer();
fs.writeFileSync("./jojo.png", data);
console.log("Jojo card generated: jojo.png");
}
generateJoCard();
This USAGE.md provides a starting point. For cards marked with "(Needs further inspection)", you would typically examine their respective .js files in the src directory to identify their specific methods and parameters. You can use the file.read tool for this purpose.
FAQs
A Node.js module for generating various Discord-style image cards using the canvas library.
We found that koja-canvas-cards demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Company News
Socket won two 2026 Reppy Awards from RepVue, ranking in the top 5% of all sales orgs. AE Alexandra Lister shares what it's like to grow a sales career here.

Security News
NIST will stop enriching most CVEs under a new risk-based model, narrowing the NVD's scope as vulnerability submissions continue to surge.

Company News
/Security News
Socket is an initial recipient of OpenAI's Cybersecurity Grant Program, which commits $10M in API credits to defenders securing open source software.