CODEWITHSUNDEEP
javascripthtmlcanvas
Jobs
Jobs

Reputation: 3377

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

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>

Upvotes: 0

Views: 1301

Answers (1)

Tiisetso Tjabane
Tiisetso Tjabane

Reputation: 2106

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>

Upvotes: 2

Related Questions