Search code examples
htmlcanvasfont-face

Custom font in HTML5 Canvas

I am using Font Awesome to provide various symbols for my web page. I want to use one of those symbols, a cog, on my canvas too to provide a settings icon.

The CSS for the Cog icon is defined as (which works on the rest of the page fine)

content: "\f013";
font-family: "FontAwesome";

On my canvas I use the following code but it only comes out with 013... What am I doing wrong?

context.fillStyle = "rgba(255, 255, 255, 0.7)";
context.font      = 'FontAwesome';
context.textAlign = 'right';
context.fillText("\f013", counter.x + halfWidth - 10, counter.y - halfWidth +20);
context.textAlign = 'left';
Solution

  • JavaScript uses different syntax for Unicode escapes. "\uf013"