canvas
canvas copied to clipboard
Canvas refusing to render text with any font
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?
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]})
}
}
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.
Same problem
currently having the same issue, anyone have or know of a fix?
currently having the same issue, anyone have or know of a fix?
Nope... We'll just wait for Broklyn...
Could you provide a font file here so I can debug it
Installing Font config on server worked for me.
sudo yum install fontconfig
Okay, will try this. Also I can't believe it has been 10 months since my post lol