Why am I not able to use fontawesome unicode icons on canvas?

Question

I'm trying to draw Unicode FontAwesome icons on Canvas, but the result I see (below) is not exactly what I expected. How do I draw these correctly? I got the Unicode from the FontAwesome webpage. For example https://fontawesome.com/icons/500px?style=brands

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "15px FontAwesome";
ctx.fillStyle = "black";
ctx.fillText('\uf0ac', 170, 55);

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<canvas id="myCanvas"></canvas></body>

[draw font awesome](https://stackoverflow.com/questions/35570801/how-to-draw-font-awesome-icons-onto-html-canvas) Check out this post. — Tiisetso Tjabane, Sep 13 '18 at 05:24
I tried adding a timeout of 4 seconds (meaning wrapping the drawing part inside a function that is given to setTimeout()) but am getting the same result. @TiisetsoTjabane — Jobs, Sep 13 '18 at 05:33

score 2 · Answer 1 · answered Sep 13 '18 at 06:19

The problem is most likely with refreshing the canvas after the fonts have been loaded.

In this post they provide a better event based solution.

but to get my point across I have used a less elegant solution with using setinterval

you can stop the timer after your fonts have been redrawn.

$(function(){    
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw,ch;
    
    setInterval(()=>{
        var ctx=canvas.getContext("2d");
        ctx.clearRect(0,0,300,300);
        ctx.font='48px fontawesome';
        ctx.fillText('\uf0ac',20,75);
    },1000)
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<head>
</head>
<body>
    <h4>Font Awesome glyphs drawn onto html5 canvas</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>

How come when I change the fontAwesome link to the following, it doesn't work? I need to use some version 5 icons.. — Jobs, Sep 13 '18 at 20:17

Why am I not able to use fontawesome unicode icons on canvas?

1 Answers1