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.
/** @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 fontsimport { Builder, JSX, Font, FontFactory } from "canvacord";import { writeFile } from "node:fs/promises";// define a builderclass 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 builderconst generator = new Generator();// build the image and save it to a fileconst 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 fontsimport { Builder, JSX, Font, FontFactory } from "canvacord";import { writeFile } from "node:fs/promises";// define a builderclass 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 builderconst generator = new Generator();// build the image and save it to a fileconst 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 fontsimport { Builder, JSX, Font, FontFactory } from "canvacord";import { writeFile } from "node:fs/promises";// define a builderclass 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 builderconst generator = new Generator();// build the image and save it to a fileconst image = await generator.build({ format: "png" });await writeFile("image.png", image);