Any emoji support?

[kevzettler]

The following code gives me the follwing image output:

    var Canvas = require('canvas');
    var Image = Canvas.Image;
    var canvas = new Canvas(1200, 600);
    var ctx = canvas.getContext('2d');

    ctx.font = '80px HelveticaNeue';
    ctx.fillText('Start Here emoji 🍔', 50, 100);

    res.setHeader('Content-Type', 'image/png');
    canvas.pngStream().pipe(res);

Not rendering the emoji. Is this possible?

[jakeg]

Sudo apt-get install ttf-ancient-fonts On 3 May 2016 6:24 p.m., "Kev Zettler" notifications@github.com wrote:

The following code gives me the follwing image output:

var Canvas = require('canvas');
var Image = Canvas.Image;
var canvas = new Canvas(1200, 600);
var ctx = canvas.getContext('2d');

ctx.font = '80px HelveticaNeue';
ctx.fillText('Start Here emoji 🍔', 50, 100);

res.setHeader('Content-Type', 'image/png');
canvas.pngStream().pipe(res);

Not rendering the emoji is this possible?

[image: tiltimage] https://cloud.githubusercontent.com/assets/126209/14992066/1bda3db0-1119-11e6-9d8a-032830b641e0.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/Automattic/node-canvas/issues/760

[gabrielcsapo]

duplicate of #614

[gabrielcsapo]

is there a solution for OSX?

[gabrielcsapo]

Trying to use Apple Color Emoji.ttf

getting

Assertion failed: (!scaled_font->cache_frozen), function _cairo_scaled_glyph_page_destroy, file cairo-scaled-font.c, line 459.

var AppleColorEmoji = new Font('Apple Color Emoji', fontFile('Apple Color Emoji.ttf'));
ctx.addFont(AppleColorEmoji);

[gabrielcsapo]

Still no luck, anyone found way to render emojis on the mac?

[chearon]

I did some digging on this... the code point printed out in the screenshot from @kevzettler is correct, so I think that was just a missing emoji font, not a bug in node-canvas

But I tried to do it on my Mac and I couldn't get emojis to print with or without Pango. I think there might be an encoding issue on OS X, because the code point that prints out for me is definitely wrong. I tried several emoji and they all printed out as D83C

[chearon]

there's definitely a problem with Pango, I tried it in pure C. I submitted a bug with them:

https://bugzilla.gnome.org/show_bug.cgi?id=766091

[gabrielcsapo]

@chearon I ended up just using phantom to take screenshots of emojis. Good find on the bug! Hopefully someone can pick it up!

[chearon]

@gabrielcsapo it looks like someone already has fixed it in the next Pango version, but it also has to be fixed in Cairo but that patch hasn't made it in yet. We will just have to wait!

[gabrielcsapo]

@chearon awesome news!

[petermikitsh]

@chearon My apologies for my ignorance, but are those changes available yet? I'm currently still experiencing this issue.

[chearon]

After a quick look at the cairo master I don't think so :/

Kristian Rietveld has been maintaining patches that, for whatever reason, have not been accepted into Cairo. The only option right now is to compile Cairo with the patches yourself.

It could also be part of the canvas-prebuilt build if I can find the time

[petermikitsh]

I spent a few hours trying to compile cairo on OS X with unfortunately no success. That being said, my particular use case doesn't demand emoji rendering -- it's more so a nice to have. Given that Cairo hasn't released since 2015, I think using the branch with the emoji support inside of canvas-prebuilt would be a good option.

[chearon]

Yeah, probably, I was already thinking about bundling at least one Pango patch with prebuilt. Pango suffers from incompleteness on Not Linux platforms as well. It's a real bummer.

And for Cairo compilation... it might help to look at the Homebrew formula. Actually it'd be great if we convinced them to use the patch in the official formula, if not maybe it could be forked.

[petermikitsh]

@chearon Thanks for the tip. I was able to get a custom build of Cairo to succeed by modifying the brew formula to point to this branch. I don't believe that branch had the needed fixes, though, so my rendering still lacked emojis.

If there was a way to get the URL to the git repo containing the patch changes from the bugzilla patch (which I haven't been able to figure out), I could build it and verify it fixes this issue.

[chearon]

Nice work! I just tried applying Kristian's patch to Cairo@master and it applied cleanly! I've pushed it up here for your convenience - let me know if it works, I haven' tried but I might make an attempt in a bit

[petermikitsh]

Using cairo@HEAD-a212165 and pango@1.40.3, I get a slightly different result than @kevzettler. No emoji, but also no undesirable artifact.

Here is my modified formula and node script to generate png (which will be available at http://localhost:8099/). I edited the formula using brew edit cairo and installed using brew install cairo --HEAD.

[chearon]

I get the same result. I noticed there were 2 patches posted and I tried the other one instead (I pushed it to the repo too) but it didn't seem to work either

[petermikitsh]

I just heard back from Andrea Canciani. I was advised to use apply the patch from bugzilla to https://github.com/matthiasclasen/cairo/tree/matthiasc/emoji-5.

[chearon]

Ok, my master is now the emoji-5 branch with the patch applied. I'm trying it now

[gabrielcsapo]

I love this awesome support! You guys rock!

[petermikitsh]

@gabrielcsapo The new build also did not seem to resolve the issue. :( I've commented on the original bugzilla report, and hopefully though continued discussion with cairo contributors we'll be able to get a working build that people can compile and use with node-canvas (possibly creating a prebuilt version) and, in the long term, a new release of cairo installable through homebrew.

[chearon]

I commented on the one I submitted, too. They were talking about how Mozilla's fork of Cairo resolves the issue, so there is probably working code in their fork here (the emoji patch looks to be here) but it'll be harder to get compiling

[nuixdt]

Emoji font works with pango master branch and 1.40.2 or later, cairo master branch and 1.14.6 or later applied Kris's patch.

pango depends on cairo, compile and install cairo first. Emoji font is 4 bytes long <----

emoji font seems too big and pango cuts off right and bottom edges of emoji font.

[smaznet]

@nuixdt cairo: 1.14.10-1ubuntu1 pango: 1.14.10-1ubuntu1

but not showing colored apple emojies

my code

const { createCanvas, loadImage , registerFont} = require('canvas');
registerFont('applecoloremoji.ttf',{family: "Apple"});
let canvas = createCanvas(512,512);
let c = canvas.getContext('2d');
c.font = '50px "Apple"';
c.fillText("😂😐😶💋👍😭 ",50,50,50);

[chearon]

On macOS you need to compile Pango yourself with 2 patches to get emoji working. The first one being the one that @petermikitsh and I were trying to get working, and the other being one that was posted early this year. Both here, I haven't tried the second patch yet though.

[smaznet]

@chearon Thank you i will test that but im using ubuntu 17.10

[F1LT3R]

Is there a good workaround for this currently? I'm reading the thread here, bi]but it's a little hard to follow and figure out what I should do.

Does anyone have steps for supporting emojis on OS X?

[F1LT3R]

Even after updating Pango, I get the following:

This is what it should look like:

[chearon]

Cairo and Pango have to do some coordinating to get emojis working, I would try to compile the latest of both from source. Supposedly it should work but as you can see above we couldn't get it working, and I sunk a lot of time into it 😕

[chenzhq]

So, node-canvas still not support emoji, right?🙁

[robert-moore]

Any update on this? Or anything we can do to help?

[lukasondre]

@chearon is there any update regarding colour emoji support? I've been digging into this a lot since I need proper emojis to show up when using fabric.js but haven't found a solution yet. I'm happy to help out but not sure how.

[lukasondre]

@chearon I've also installed cairo 1.16 and tried building from source as well and it's still just showing the black-and-white emoji. I'd really appreciate your help in finding a solution to this.

[lukasondre]

Any update on this? Or anything we can do to help?

@robert-moore did you ever find a solution?

[lukasondre]

I'm on Debian (Buster) by the way

[ushmakapure]

@lukasondrej have you been able to make any progress on this yourself?

[lukasondre]

@ushmakapure I've overcome the issue by inserting the blank character instead of all emojis and then by placing emoji pngs (from twemoji) into the gaps. Certainly more involved then it should be.

[robert-moore]

@lukasondrej how do you figure out where the emoji should be? A bunch of measureTexts?

[ushmakapure]

Thanks @lukasondrej, we've decided to work around the issue entirely & not allow emoji to be entered inline in text. We'll most likely end up adding an emoji picker and insert as images.

[lukasondre]

@robert-moore I've implemented a subclass of Textbox and overrode the _renderChar method like so:

_renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
  // Render emoji
  if (_char === '　') {
    // Draw emoji
    const emoji = this.emojis[this.emojiCodes[this.emojisCodeIndex]]
    emoji.set({
      left,
      top: top - this.options.fontSize + 2
    })
    emoji.scaleToWidth(this.options.fontSize)
    emoji.scaleToHeight(this.options.fontSize)
    emoji.drawObject(ctx)

    // Set emoji index of next emoji
    this.emojisCodeIndex++
    if (this.emojisCodeIndex > this.emojiCodes.length - 1) {
      this.emojisCodeIndex = 0
    }
  }
}

In summary, when I get the string of text to display, I extract all emojis by matching their unicode definitions and replace them by the square space character. Then in the _renderChar method, each time there's a square space character, I look up the emoji to put in based on its index and manually draw it. I'm using fabric.js by the way.

Hope that helps :)

[andrey-hohlov]

@lukasondrej can you please share how do you create this.emojis and this.emojiCodes?

UPD: ok, got it - twemoji. But the second problem - I get full text row in _renderChar method, not singe characters.

[dave917408]

maybe this is helpful for someone searching in this thread. i just stumbled upon the actual oposite problem that on Ubuntu 18.04 i'm always getting the colourful emojis. it seems in my installation it's not picking from the specified font, but would always replace the font with the emoji font.

after some research i found it's caused by the configurations in these both files: /etc/fonts/conf.d/45-generic.conf /etc/fonts/conf.d/60-generic.conf

now i wanted to change this behaviour only for my application and not systemwide, so i took a local copy of the /etc/fonts.conf file in my workspace and removed directions that would load the both files (remove the include of all files under /etc/fonts/conf.d/*). then when starting the node.js application have an environment variable FONTCONFIG_FILE set to point to the new config file. be aware that this might have side-effects on other font configurations or font replacement rules...

[cagpie]

I wrote a module to draw emoji with Twemoji. Until the problem is solved, try it out.

https://github.com/cagpie/node-canvas-with-twemoji https://www.npmjs.com/package/node-canvas-with-twemoji

[motyar]

_renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
  // Render emoji
  if (_char === '　') {
    // Draw emoji
    const emoji = this.emojis[this.emojiCodes[this.emojisCodeIndex]]
    emoji.set({
      left,
      top: top - this.options.fontSize + 2
    })
    emoji.scaleToWidth(this.options.fontSize)
    emoji.scaleToHeight(this.options.fontSize)
    emoji.drawObject(ctx)

    // Set emoji index of next emoji
    this.emojisCodeIndex++
    if (this.emojisCodeIndex > this.emojiCodes.length - 1) {
      this.emojisCodeIndex = 0
    }
  }
}

I tried but it isn't working for me, Can you please share full code in gist or codepen please.

Thanks a lot in advance!

[motyar]

_renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) {
  // Render emoji
  if (_char === '　') {
    // Draw emoji
    const emoji = this.emojis[this.emojiCodes[this.emojisCodeIndex]]
    emoji.set({
      left,
      top: top - this.options.fontSize + 2
    })
    emoji.scaleToWidth(this.options.fontSize)
    emoji.scaleToHeight(this.options.fontSize)
    emoji.drawObject(ctx)

    // Set emoji index of next emoji
    this.emojisCodeIndex++
    if (this.emojisCodeIndex > this.emojiCodes.length - 1) {
      this.emojisCodeIndex = 0
    }
  }
}

I tried but it isn't working for me, Can you please share full code in gist or codepen please.

Thanks a lot in advance!

@lukasondrej

[tsafs]

Edit: I found out that not all typical emojis are supported by twmoji-emojis. I haven't updated the code below, but I am now not painting anything (just skipping the position in the text) if the emoji was not found on the server.

@motyar and others who are using fabric.js: I'm afraid I'm a little late, but the code below is my solution to the problem, similar to @lukasondrej's solution. I also use fabric.js for the canvas and twemoji-emojis for emoji svgs.

The approach is similar, because I do not use '　' to replace emojis, but a regular emoji 😀. This is necessary, because using '　' will result in wrong left and top locations for the characters, i.e. for drawing emoji's SVGs and also for the text. My software has a frontend-canvas accessible through the browser and a backend-canvas on the server-side which generates a PNG-file from what was drawn on the front-end. The text & emoji bounds would be different, using '　' as a placeholder.

Also, I override _renderChars() to force it to always render each character by itself and not render the whole line at once. I guess that @lukasondrej forgot to mention that, hence why his solution is not working, or not complete.

Use the following Textbox instead of fabric.Textbox and call await myCustomTextbox.extractEmojis() before calling fabricCanvas.renderAll().

One possible problem with this code: I don't know how it behaves if we use a font family that does not support emojis. Is that even possible? I will probably stumble upon this problem in the following days and might update this answer. If not then just leave me a bump if you like.

import { fabric } from "fabric";
import fs from "fs";
import EmojiRegex from "emoji-regex";

const EMOJI_FOLDER = "./node_modules/twemoji-emojis/vendor/svg";
const TOP_CORRECTION = 0.6;
const LEFT_CORRECTION = 0.15;

class Textbox extends fabric.Textbox {
  emojis = {}; // holds fabric svgs for emojis that were identified in text
  emojiCodes = []; // holds emoji codes that were identified in text
  currentEmojiCodeIndex = 0; // current index of emoji that is being rendered
  emojisForLogging = []; // holds emojis for logging

  async extractEmojis() {
    const regex = EmojiRegex();
    let match;
    const distinctEmojiCodes = [];
    const indexes = [];
    let escapedText = this.text + "";
    while ((match = regex.exec(this.text))) {
      const emoji = match[0];
      const hexes = [];
      for (let part of [...emoji]) {
        hexes.push(part.codePointAt(0).toString(16));
      }
      console.log(emoji, match["index"], hexes);
      indexes.push(match["index"]);
      this.emojisForLogging.push(emoji);

      // this is the emoji code in twemoji-format
      const filename = hexes.join("-");

      // create a reference
      this.emojiCodes.push(filename);

      // push to distinct list of emoji codes, from which emojis will be created
      if (!distinctEmojiCodes.includes(filename)) {
        distinctEmojiCodes.push(filename);
      }

      // replace emoji with placeholder emoji
      escapedText = escapedText.replace(emoji, "😀");
    }

    // override this.text with escaped text
    this.text = escapedText;
    console.log(escapedText, distinctEmojiCodes, indexes, this.emojiCodes, this.emojisForLogging);

    for (let emojiCode of distinctEmojiCodes) {
      this.emojis[emojiCode] = await this.loadSvg(emojiCode);
    }
  }

  loadSvg(emojiCode) {
    return new Promise((resolve, reject) => {
      fs.readFile(`${EMOJI_FOLDER}/${emojiCode}.svg`, "utf8", (err, data) => {
        if (err) return reject(err);
        fabric.loadSVGFromString(data, (objects, options) => {
          resolve(new fabric.util.groupSVGElements(objects, options));
        });
      });
    });
  }

  _renderChar(method, ctx, lineIndex, charIndex, _char, left, top, lineHeight) {
    if (_char === "😀") {
      console.log(this.emojisForLogging[this.currentEmojiCodeIndex], lineIndex, charIndex, left, top, lineHeight);

      const emoji = this.emojis[this.emojiCodes[this.currentEmojiCodeIndex]];
      emoji.set({
        left: left + lineHeight * LEFT_CORRECTION,
        top: top - lineHeight * TOP_CORRECTION,
      });
      emoji.drawObject(ctx);

      // Set emoji index of next emoji
      this.currentEmojiCodeIndex++;
      if (this.currentEmojiCodeIndex > this.emojiCodes.length - 1) {
        this.currentEmojiCodeIndex = 0;
      }
    } else {
      super._renderChar(method, ctx, lineIndex, charIndex, _char, left, top);
    }
  }

  _renderChars(method, ctx, line, left, top, lineIndex) {
    // set proper line offset
    var lineHeight = this.getHeightOfLine(lineIndex),
      actualStyle,
      nextStyle,
      charsToRender = "",
      charBox,
      boxWidth = 0,
      path = this.path;

    ctx.save();
    top -= (lineHeight * this._fontSizeFraction) / this.lineHeight;
    for (var i = 0, len = line.length - 1; i <= len; i++) {
      charsToRender += line[i];
      charBox = this.__charBounds[lineIndex][i];
      if (boxWidth === 0) {
        left += charBox.kernedWidth - charBox.width;
        boxWidth += charBox.width;
      } else {
        boxWidth += charBox.kernedWidth;
      }
      if (path) {
        ctx.save();
        ctx.translate(charBox.renderLeft, charBox.renderTop);
        ctx.rotate(charBox.angle);
        this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight);
        ctx.restore();
      } else {
        this._renderChar(method, ctx, lineIndex, i, charsToRender, left, top, lineHeight);
      }
      charsToRender = "";
      actualStyle = nextStyle;
      left += boxWidth;
      boxWidth = 0;
    }
    ctx.restore();
  }
}

export default Textbox;

[Flyover-ArtSk]

almost 4 years no support of emoji... any news here?

[ArmorDarks]

I've made recent tests with Noto Color Emoji, Segoe UI and twemoji-color-font, and emoji do work now, but they are always black and white (MacOS, in Docker).

Changelog says that Cairo v1.15.8 supports color emoji with PNGs, but I wasn't able to make it colorful anyway.

Related patch seems to be still unmerged https://gitlab.freedesktop.org/cairo/cairo/-/issues/54

For instance, Segoe UI Emoji which uses Microsoft emoji format is tested here and reported to be working https://gitlab.freedesktop.org/cairo/cairo/-/issues/404

However, in node-canvas it's always rendering as black and white. Maybe something needs to be configure in node-canvas when Cairo is used?

[legraphista]

I've made recent tests with Noto Color Emoji, Segoe UI and twemoji-color-font, and emoji do work now, but they are always black and white (MacOS, in Docker).

Those fonts have path glyph emojis. They have always worked as they are not any different from any other character.

On the other hand, Bitmap emojis don't have proper support yet