javascript - How to render icon fonts on HTML canvas and Material Design icon fonts in particular?

Question

This wonderful answer details how to include icons from FontAwesome in a HTML canvas. Adapting the code for icon font from Material Design doesn't work, however. All the code is the same except for replacing FontAwesome values for Material Design values.

Code below.

Codepen: https://codepen.io/Crashalot/pen/dyyEPWV

1) How do you incorporate icons from Material Design in HTML canvas?

2) How do you incorporate icons from any icon font (e.g., https://github.com/framework7io/framework7-icons)?

var FontAwesome = function () {
    return new Promise(function (done, failed) {
        var me = {},
            FACache = {};

        function find (name) {
            var elm = document.createElement('i');
            elm.className = 'fa fa-' + name;
            elm.style.display = 'none';
            document.body.appendChild(elm);
            var content = window.getComputedStyle(
                elm, ':before'
            ).getPropertyValue('content')
            document.body.removeChild(elm);
            return content;
        };

        me.get = function (name) {
            if (!!FACache[name]) return FACache[name];
            var c = find(name)[1];
            FACache[name] = c;
            return c;
        };

        (function() {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.onload = function () {
                document.fonts.load('10px Material Icons')
                    .then(function (e) { done(me); })
                    .catch(failed);
            }
            l.href = '//fonts.googleapis.com/icon?family=Material+Icons';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
        }());
    });
};

FontAwesome()
.then(function (fa) {

    var canvas = document.getElementById('mycanvas');
    const x = canvas.width / 2;
    const y = canvas.height / 2;

    // All set, and ready to render!
    var ctx = canvas.getContext('2d');
        ctx.textAlign = "center";
            ctx.textBaseline = "middle";
        ctx.font = '400px Material Icons';
        ctx.fillText(fa.get("airplanemode_active"), x, y);
});

Answer 1

Use the FontFace interface.

All it needs is the url of your font file. Its load() method will return a Promise resolving when the font will be ready to use.

const ctx = canvas.getContext('2d');

const material_font = new FontFace( 'material-icons',
  // pass the url to the file in CSS url() notation
  'url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)' );
document.fonts.add( material_font ); // add it to the document's FontFaceSet

const framework7_font = new FontFace( 'framework7-icons',
  'url(https://cdn.jsdelivr.net/gh/framework7io/framework7-icons@master/fonts/Framework7Icons-Regular.woff2)' );
document.fonts.add( framework7_font );

// wait the font loads
material_font.load().then( () => {
  // we're good to use it
  ctx.fillStyle = 'green';
  ctx.font = '20px material-icons';
  ctx.fillText('airplanemode_active', 20, 40);
}).catch( console.error );

framework7_font.load().then( () => {
  ctx.fillStyle = 'blue';
  ctx.font = '20px framework7-icons';
  ctx.fillText('airplane', 20, 80);
}).catch( console.error );

<canvas id="canvas"></canvas>