1

When I try to display text on a picture using Canvas, some characters and emoji are displayed incorrectly on Windows and Ubuntu. 1 screen - on Windows, 2 screen - on Ubuntu. With any font, this is the situation. Canvas that on Windows, that on Ubuntu I just installed via npm install canvas.

Windows

Ubuntu

Code:

const canvas = Canvas.createCanvas(1000,333)
const ctx = canvas.getContext('2d');
        
const background = await Canvas.loadImage('https://i.imgur.com/YzwG7yk.jpeg')
ctx.drawImage(background, 0, 0, canvas.width, canvas.height)
ctx.font = '300 30px "Arial"'
ctx.fillStyle = '#ffffff'
ctx.fillText(`\nマークとニック\nPzk`, 70, 70)
const attachment = new Discord.MessageAttachment(canvas.toBuffer(), 'xp.png');
return message.channel.send(attachment)
Thielicious
  • 4,122
  • 2
  • 25
  • 35
Mokcemka
  • 11
  • 4

1 Answers1

0

You need to have a font able to render these glyphs installed on your server.
If you can't control the fonts on your server, you can load a webfont using registerFont

Live example.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • I am aware of the registerFont, but the problem is different now – Mokcemka Feb 15 '21 at 16:19
  • And how is the problem now? And actually, if the problem is different, this one is fixed, open a new question. – Kaiido Feb 15 '21 at 22:36
  • And here registerFont if I use default fonts? And even when I use registerFont, the problem remains. Maybe there are some fonts with which there will be no such problems? – Mokcemka Feb 16 '21 at 10:34
  • @Mokcemka you need to register the fonts that will handle these glyphs, just like it's written in the answer. Check the linked [glitch example](https://glitch.com/edit/#!/rainbow-salty-ozraraptor) where I do load Adobe's EmojiOneColor font. Without the `registerFont` line there the hearts glyphs wouldn't render. In your case you also need to register a font for the katakana & hiragana glyphs, glitch's default setup already has one system wide. – Kaiido Feb 16 '21 at 10:51
  • `regiserFont` works, but it still doesn't display all characters. I tried with your font too, but it didn't help. I also see that you used the "Arial" font and it works. And I discovered a novelty for myself, on Windows it shows all symbols with the default font "Tahoma", but when I tried to use this font on Ubuntu, it also does not show all the symbols. What could be the problem in your opinion? Or maybe I do not fully understand something? I use Canvas for discord-js – Mokcemka Feb 16 '21 at 14:53
  • Neither Arial nor Tahoma have these glyphs. So an other system font is used to render them. But on your system bo such font exists. You need to install the fonts that are able to render these glyphs or to register them. In my glitch example I was only missing the emoticon glyphs so I registered only an emoticon font. You need to install both a font for the emoticons and for katakanas. – Kaiido Feb 16 '21 at 23:21
  • Do you have any ideas for fonts that work for me? – Mokcemka Feb 19 '21 at 14:41
  • For the katakanas you can look at "Noto sans JP" or any CJK fonts. For the fraktur glyphs have a look at [this link](https://www.fileformat.info/info/unicode/char/1d510/fontsupport.htm) or search for "fonts fraktur" – Kaiido Feb 19 '21 at 14:55
  • oh my god... I really just needed to connect the fonts to show everything? I initially did not understand this, I apologize for my stupidity. Using registerFont, I connected three fonts: EmojiOneColor - you advised me, NotoSans JP - hieroglyphs (second line) and Cambria (third line). If suddenly the same type of problem arises, should I just look for fonts for certain hieroglyphs? (I use Google translator, I apologize if there were mistakes in my suggestions :D) [Working!](https://imgur.com/TFWNMGg) – Mokcemka Feb 19 '21 at 21:00
  • Ty very much! <3 – Mokcemka Feb 24 '21 at 15:19