4

I'm try to draw emoji on p5.js canvas. But on windows platform, some emoji are displayed only them outline.(e.g. ☀) When I using, I could display on html element but couldn't on p5.js canvas. Is there good and simple method for displaying emojis correctly on windows?

nomo
  • 63
  • 3
  • Use a font that handles emojis like you want instead of the default font. – D. Pardal Oct 07 '20 at 13:59
  • Please include the code that you have tried or a link to a *new* p5 editor sketch with just the [MCVE](https://stackoverflow.com/help/minimal-reproducible-example), or preferably both. – Samathingamajig Oct 07 '20 at 14:43
  • I wanna to use WebFont for p5.js, but I can't find how to do it. I could do on html by referenced https://codepen.io/suin/pen/ryrELN . – nomo Oct 08 '20 at 12:40

1 Answers1

4

Live Code Example

Make sure you actually use the emoji correctly, the easiest way is to copy from Emojipedia. (You can also type these emojis by pressing and holding the Windows Key + . (period) if on Windows))

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  textSize(64);
  textAlign(CENTER)
  text('', width/2, height/2);
  text('☀️️', width/2, height/2 + 100);
}

Remember, under the hood, the p5.js library is just that: a library. This meaning it can easily be converted to normal javascript, so you can search up how to draw emojis in the html <canvas>, and you find this. This shouldn't be marked as duplicate, though, because p5js has different commands to display this compared to just using ctx..

Samathingamajig
  • 11,839
  • 3
  • 12
  • 34
  • Hi @samathinganajig ! Thanks for the example. I happened to walk through this post and working on my own project involve text and font! So what font that makes this emoji possible? – TeeTee Nov 04 '20 at 19:31
  • I'm pretty sure emojis are determined by your operating system, (or an image/svg on some websites showing examples of emojis) not a specific font @TeeTee – Samathingamajig Nov 04 '20 at 19:50