Проблема с регистрацией шрифта в Canvas JavaScript

Пытаюсь зарегистрировать шрифт в холсте, чтобы загрузить бота на хостинг, ошибок не выдает, но шрифт просто не отображается на хосте. Вот код

const { AttachmentBuilder } = require('discord.js');
const { SlashCommandBuilder } = require('@discordjs/builders');
const Canvas = require('@napi-rs/canvas');

const { registerFont } = require('canvas');
registerFont('./Comic Sans MS.ttf', { family: 'Comic Sans' })

const canvas = Canvas.createCanvas(1150, 800);
        const ctx = canvas.getContext('2d');

        const background = await Canvas.loadImage('./image.png');
        ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

        ctx.fillStyle = '#270a1f';
        ctx.fillRect(0, canvas.height - 400, canvas.width, 400);
 
        ctx.strokeStyle = '#ff033e';
        ctx.strokeRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = '#0000ff'
        ctx.beginPath();

что мне ввести, чтобы появился шрифт

ctx.font = '50px "Comic Sans"';
 ctx.fillStyle = '#412227';

Я просмотрел документацию и не нашел явных ошибок.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте импортировать GlobalFonts из @napi-rs/canvas, а затем использовать GlobalFonts.registerFromPath().

Это мой код, который у меня отлично работает:

import { GlobalFonts } from '@napi-rs/canvas';
// or require for JS

const __dirname = dirname(fileURLToPath(import.meta.url));

GlobalFonts.registerFromPath(
    resolve(__dirname, '..', 'assets', 'Segoe_UI.ttf'),
    'Segoe UI'
);

ctx.font = '700 20px Segoe UI';
Ответ принят как подходящий

В некоторых системах ./ — это current working directory вместо каталога файлов. Вместо этого используйте process.cwd() или модуль path.

registerFont(`${process.cwd()}/path/Comic Sans MS.ttf`, { family: 'Comic Sans' })
const { resolve } = require("path")
registerFont(resolve('./Comic Sans MS.ttf'), { family: 'Comic Sans' })

Другие вопросы по теме