Canvas refusing to render text with any font

CerialPvP commented 1 year ago

I might be dumb, but let me explain myself. I am hosting a Discord bot on a host, and that host is using Docker containers (that's what is known to me). I saw a few issues about people having issues with their applications running on Docker which don't render any text and somehow magically solving it later. This is not my case, yes, I tried installing a custom font, in fact, that is what I wanted to do, but the program refuses to render the text. And yes, it does register the fonts, but I don't know about anything else I can do. Can someone help? @Brooooooklyn?

CerialPvP commented 1 year ago

This is my code:

const c = require("@napi-rs/canvas")
const config = require("../config.json")
const { SlashCommandBuilder, ChatInputCommandInteraction, AttachmentBuilder } = require("discord.js")
const undici = require("undici")

console.log(`Registered font: ${c.GlobalFonts.registerFromPath("./Ubuntu-Regular.ttf", "ubuntu-regular")}`)

module.exports = {
    name: "test",
    data: new SlashCommandBuilder()
        .setName("test").setDescription("(Owners Only) A test command."),

    /**
     * 
     * @param {ChatInputCommandInteraction} interaction 
     */
    async execute(interaction) {
        //! KEEP THIS CODE AT ALL COSTS!
        if (!config.owners.includes(interaction.user.id)) {
            return await interaction.reply({content: "This command is only available to owners.", ephemeral: true})
        }
        const t1 = new Date()
        await interaction.deferReply()

        // Initialize Canvas
        const canvas = c.createCanvas(1280, 720)
        const ctx = canvas.getContext("2d")

        // Draw the background
        const bg = await c.loadImage("./images/butler_welcometemplate.png")
        ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)

        // Draw the PFP
        const {body} = await undici.request(interaction.user.displayAvatarURL({extension: "png"}))
        const pfp = await c.loadImage(await body.arrayBuffer())

        ctx.beginPath()
        ctx.arc(640, 187, 100, 0, Math.PI*2, true)
        ctx.closePath()
        ctx.clip()
        ctx.drawImage(pfp, 535, 77, 210, 210)

        // Text utils
        /*const applyText = (canv, text) => {
            const ctx = canv.getContext("2d")

            let fontsize = 17
            do {
                ctx.font = `${fontsize -= 10}px ubuntu-regular`
            } while (ctx.measureText(text).width > c.width - 300)

            return ctx.font
        }*/

        // Change the username text if the user has a pomelo username and apply font
        let name = `${interaction.user}`
        if (!name.includes("#") && interaction.user.discriminator != "0") {
            name = name.replace(`#${interaction.user.discriminator}`, "")
            name = name.replace(`${name}`, `@${name}`)
        }
        //ctx.font = applyText(canvas, name)
        ctx.font = "17px ubuntu-regular"
        ctx.fillStyle = "#ffffff"
        ctx.fillText(name, 640, 405)

        // Send the images
        const att = new AttachmentBuilder(await canvas.encode("png"), {name: "butler_welcome.png"})
        const res = new Date()-t1
        return await interaction.editReply({content: `**DEBUG:** Total time - ${res}ms`, files: [att]})
    }
}

CerialPvP commented 1 year ago

And here I will provide 2 images; one which is what is supposed to happen, and the other one is what is happening in reality. ready