npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

koja-canvas-cards

v1.1.2

Published

A Node.js module for generating various Discord-style image cards using the canvas library.

Readme

Discord Canvas Cards - Usage Guide

This document provides detailed usage instructions and examples for all card generation functions available in the canvas-cards package.

Table of Contents

Installation

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:

  • Debian/Ubuntu:

sudo apt-get update sudo apt-get install build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev ```

  • macOS:

brew install pkg-config cairo pango libjpeg giflib librsvg ```

  • Windows: Installing 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.

Common Methods

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.

Greetings Cards

Welcome Card

This card generates a welcome message for new members joining a guild.

Class: CanvasCards.Welcome

Methods:

  • Inherits common methods like setAvatar, setUsername, setGuildName, setMemberCount, setBackground, setGuildIcon, setDiscriminator.
  • Specific properties set in constructor: 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();

Welcome2 Card

A variation of the welcome card.

Class: CanvasCards.Welcome2

Methods:

  • Inherits common methods.
  • Specific methods/properties may include 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();

Welcome3 Card

Another variation of the welcome card.

Class: CanvasCards.Welcome3

Methods:

  • Inherits common 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();

Goodbye Card

Generates a goodbye message for departing members.

Class: CanvasCards.Goodbye

Methods:

  • Inherits common methods.
  • Specific properties set in constructor: 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();

Goodbye2 Card

A variation of the goodbye card.

Class: CanvasCards.Goodbye2

Methods:

  • Inherits common 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();

Goodbye3 Card

Another variation of the goodbye card.

Class: CanvasCards.Goodbye3

Methods:

  • Inherits common 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();

Rank Cards

Rank Card (src/rank/Rank.js)

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();

Rank Card (src/update/Rank.js)

Another rank card, potentially with different styling or features.

Class: CanvasCards.Rank (from src/update/Rank.js)

Methods:

  • (Needs further inspection of 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();

GFX Cards

These cards likely generate graphical effects or stylized images.

Gura Card

Class: CanvasCards.Gura

Methods:

  • (Needs further inspection of 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();

Gfx1 to Gfx5 Cards

These are likely variations of graphical effect cards.

Classes: CanvasCards.Gfx1, CanvasCards.Gfx2, CanvasCards.Gfx3, CanvasCards.Gfx4, CanvasCards.Gfx5

Methods:

  • (Needs further inspection of each 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();

Linz Cards

These cards appear to be themed or custom designs.

Lickanime Card

Class: CanvasCards.Lickanime

Methods:

  • (Needs further inspection of 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();

Burn Card

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();

Hacker1 to Hacker3 Cards

Classes: CanvasCards.Hacker1, CanvasCards.Hacker2, CanvasCards.Hacker3

Methods:

  • (Needs further inspection of each 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();

Patrick Card

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();

Premium Cards

These cards might offer unique or more elaborate designs.

Spo Card

Class: CanvasCards.Spo

Methods:

  • (Needs further inspection of 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();

Up Card

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();

Bag Card

Class: CanvasCards.Bag

Methods:

  • (Needs further inspection of 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();

Xnxx Card

Class: CanvasCards.Xnxx

Methods:

  • (Needs further inspection of 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();

Ship Card

Class: CanvasCards.Ship

Methods:

  • (Needs further inspection of 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();

Gay Card

Class: CanvasCards.Gay

Methods:

  • (Needs further inspection of 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();

Update Cards

These cards are likely part of an update or offer specific functionalities.

Inv Card

Class: CanvasCards.Inv

Methods:

  • (Needs further inspection of 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();

Horny Card

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();

Vs Card

Class: CanvasCards.Vs

Methods:

  • (Needs further inspection of 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();

Bonk Card

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();

Jo Card

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.