Quickstart - Canvacord

Setup your development environment

To get started with Canvacord, you need to have a few things set up on your local machine.

Node.js: Canvacord is built on Node.js, so you need to have it installed on your machine.
NPM: NPM is the package manager for Node.js. You will need it to install Canvacord and its dependencies.
Optionally TypeScript: To get the best out of Canvacord, we recommend you use TypeScript, but it’s not required.

Installation

npm i canvacord

yarn add canvacord

pnpm add canvacord

bun add canvacord

Use it in your project

You can use Canvacord with or without JSX. JSX is a syntax extension for JavaScript that looks similar to HTML. It allows you to write HTML-like code in your JavaScript files. If you’re familiar with React, you’ll feel right at home with JSX.

With JSX
Without JSX (Vanilla)

Using Canvacord with JSX

/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

// The JSX pragma tells transpiler how to transform JSX into the equivalent JavaScript code

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
import { Builder, JSX, Font, FontFactory } from "canvacord";
import { writeFile } from "node:fs/promises";

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        }}
      >
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

// create an instance of the builder
const generator = new Generator();
// build the image and save it to a file
const image = await generator.build({ format: "png" });

await writeFile("image.png", image);

/** @jsx JSX.createElement */
/** @jsxFrag JSX.Fragment */

// The JSX pragma tells transpiler how to transform JSX into the equivalent JavaScript code

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
const { Builder, JSX, Font, FontFactory } = require("canvacord");
const { writeFile } = require("node:fs/promises");

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        }}
      >
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

async function main() {
  // create an instance of the builder
  const generator = new Generator();
  // build the image and save it to a file
  const image = await generator.build({ format: "png" });

  await writeFile("image.png", image);
}

main();

Using Canvacord without JSX

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
import { Builder, JSX, Font, FontFactory } from "canvacord";
import { writeFile } from "node:fs/promises";

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return JSX.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        },
      },
      JSX.createElement("h1", null, "Hello, World!")
    );
  }
}

// create an instance of the builder
const generator = new Generator();
// build the image and save it to a file
const image = await generator.build({ format: "png" });

await writeFile("image.png", image);

// import Canvacord
// Builder = The base class for creating custom builders
// JSX = The JSX pragma for creating elements
// Font = The Font class for loading custom fonts
// FontFactory = The FontFactory for managing fonts
const { Builder, JSX, Font, FontFactory } = require("canvacord");
const { writeFile } = require("node:fs/promises");

// define a builder
class Generator extends Builder {
  constructor() {
    // set the size of the image
    super(300, 300);

    // if no fonts are loaded, load the default font
    if (!FontFactory.size) Font.loadDefault();
  }

  async render() {
    // declare the shape of the image
    return JSX.createElement(
      "div",
      {
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "white",
          width: "100%",
          height: "100%",
        },
      },
      JSX.createElement("h1", null, "Hello, World!")
    );
  }
}

async function main() {
  // create an instance of the builder
  const generator = new Generator();
  // build the image and save it to a file
  const image = await generator.build({ format: "png" });

  await writeFile("image.png", image);
}

main();

Result of the above code

Image Generation

Learn how to generate custom images using Canvacord’s builder api.

Image Manipulation

Learn how to manipulate images using Canvacord’s built-in image manipulation utilities.

Built-in image builders

Use Canvacord’s built-in builders to create commonly used images quickly, such as rank cards, leaderboard images, and more.

Built-in image manipulators

Use Canvacord’s built-in builders to generate commonly used memes, such as triggered gif, jail image, and more.

Looking for examples?

Find a list of builder examples that you can copy and paste into your project.

Have a suggestion?

Create an issue on GitHub if you have a suggestion or found a bug in Canvacord.

​Setup your development environment

​Installation

​Use it in your project

​Using Canvacord with JSX

​Using Canvacord without JSX

​Result of the above code

​Further reading