Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Canvas refusing to render text with any font #680

Open
CerialPvP opened this issue Jun 17, 2023 · 8 comments
Open

Canvas refusing to render text with any font #680

CerialPvP opened this issue Jun 17, 2023 · 8 comments
Assignees
Labels
bug Something isn't working

Comments

@CerialPvP
Copy link

CerialPvP commented Jun 17, 2023

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
Copy link
Author

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
Copy link
Author

CerialPvP commented Jun 17, 2023

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
image

@Brooooooklyn Brooooooklyn self-assigned this Jun 19, 2023
@Brooooooklyn Brooooooklyn added the bug Something isn't working label Jun 19, 2023
@xAkihiro666
Copy link

Same problem

@FriiZoLoGYy
Copy link

currently having the same issue, anyone have or know of a fix?

@xAkihiro666
Copy link

currently having the same issue, anyone have or know of a fix?

Nope... We'll just wait for Broklyn...

@Brooooooklyn
Copy link
Owner

Could you provide a font file here so I can debug it

@abdulqadeer1992
Copy link

Installing Font config on server worked for me.

sudo yum install fontconfig

@CerialPvP
Copy link
Author

Okay, will try this. Also I can't believe it has been 10 months since my post lol

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

5 participants