how to draw fontawesome(version >=5.0) in canvas?

Question

I want to draw fontawesome icons on the canvas.

Below is my code:

<canvas id="canvas" width="400" height="400" style="border:1px solid #d3d3d3;"></canvas>

<script>
    var content = '\uF006';
    var context = document.getElementById('canvas').getContext('2d');
    context.font = '48px Material Design Icons';
    context.fillText(content, 100, 100);
    context.strokeText(content, 100, 100);
</script>

I have imported the font files and linked it. But it doesn't works: it just show a rectangle which is empty.

can you tell me why?

one interesting thing is that it works when I link the fontawesome version 4.5 online address : enter link description here

where the difference between the two version?

Refer - https://stackoverflow.com/questions/35570801/how-to-draw-font-awesome-icons-onto-html-canvas?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa .. hope it helps :) — Krunal Shah, Apr 09 '18 at 08:44
@NicoHaase: I link it like this(in the ): `@font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.5.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal }` — katie xia, Apr 09 '18 at 08:51
@KrunalShah: I have read this article, but it doesn't fix it. In that question, he just use the old version of fontawesome. Now, I want to use the new version fontawesome. — katie xia, Apr 09 '18 at 08:55

Kaiido · Answer 1 · 2019-09-07T03:32:50.817

12

In addition to @TanDuong correct statement, it seems you even need to set the font-weight to 900 for the font to kick in...

Also note that Chrome 76+ now requires that the font is explicitly loaded, or that one of the characters using the font is present in the document (targeting only the canvas through CSS is not possible anymore).

const ctx = c.getContext("2d");
const font = '900 48px "Font Awesome 5 Free"';
// Chrome 76+ won't load the font
// until it's needed by the ducument (i.e one of the characters is displayed)
// or explicitely loaded through FontFaceSet API.
document.fonts.load(font).then((_) => {
  ctx.font = font;
  ctx.fillStyle = "red";
  // note that I wasn't able to find \uF006 defined in the provided CSS
  // falling back to fa-bug for demo
  ctx.fillText("\uF188", 50, 50);
})

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

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

edited Sep 07 '19 at 03:32

answered Apr 09 '18 at 09:33

Kaiido

123,334
13
219
285

It is really nice @Kaiido. I think this is correct answer – Tan Duong Apr 09 '18 at 09:41
Your answer actually shows the same empty rectangle for me – Marie Sep 06 '19 at 20:23
@Marie Thanks for the heads up! Indeed it seems Chrome has made some changes since v76. [I opened an issue about it](https://bugs.chromium.org/p/chromium/issues/detail?id=1001781), but for the time being I updated my answer to use a more bullet-proof solution to load the font. Note that it wasn't really related with the core of this answer, but still thanks again for your comment. – Kaiido Sep 07 '19 at 03:35
@Kaiido , Is this supported in IE > 9. – Jeya Suriya Muthumari Oct 19 '20 at 09:25

score 2 · Answer 2 · edited Aug 20 '18 at 13:19

2

In Font Awesome 5. You should use

context.font = '48px Font Awesome 5 Free'

In Font Awesome 4. You should use

context.font = '48px FontAwesome'

This is defined on FontAwesome. You can search @font-face to see what font name defined in Font Awesome 5

edited Aug 20 '18 at 13:19

ssten

1,848
1
16
28

answered Apr 09 '18 at 08:56

Tan Duong

2,124
1
11
17

but when I : ``, It can works. I don't if the unicode was wrong? – katie xia Apr 09 '18 at 09:02

score -1 · Answer 3 · answered May 29 '18 at 05:17

-1

Finally, I add a webfontloader.js, which makes it work perfect!

    <script src="./webfontloader.js"></script>

the webfontloader.js file can be found on the web.

answered May 29 '18 at 05:17

katie xia

49
1
2

how to draw fontawesome(version >=5.0) in canvas?

I want to draw fontawesome icons on the canvas.

3 Answers3

Linked