Не отображается Fonts Awesome в canvas

Question

Моя задача - нарисовать с помощью Canvas многоугольник и поместить в него одну из иконок Fonts Awesome. Но вместо иконки отображается квадрат с черными границами. Лишь спустя несколько перезагрузок страницы отображается желаемая иконка. Конечно же, я пробовал разные решения из интернета, но увы, ничего не помогло. Может рисовка самого многоугольника создает проблемы в отображении иконки? Код:

const fa_icons = document.querySelector(".fa-icon");
let polygonCtx = fa_icons.getContext("2d");

polygonCtx.beginPath();

polygonCtx.strokeStyle = "#2f2f2f"
polygonCtx.lineWidth = 1;
polygonCtx.fillStyle =  "#ffffff"
polygonCtx.moveTo(fa_icons.width / 4, 1);
polygonCtx.lineTo(fa_icons.width - fa_icons.width / 4, 1);
polygonCtx.lineTo(fa_icons.width, fa_icons.height / 2);
polygonCtx.lineTo(fa_icons.width - fa_icons.width / 4, fa_icons.height - 1);
polygonCtx.lineTo(fa_icons.width / 4, fa_icons.height - 1);
polygonCtx.lineTo(0, fa_icons.height / 2);
polygonCtx.lineTo(fa_icons.width / 4, 1);
polygonCtx.fill();
polygonCtx.stroke();



document.fonts.ready.then(() => {
  polygonCtx.font = '900 48px "Font Awesome 5 Free"';
    polygonCtx.fillStyle = "black";
    setTimeout(() => polygonCtx.fillText("\uf004", 20, 20), 1000);
});

.fa-icon {
    width: 90px;
    height: 78px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    cursor: pointer;
}

<div class="test">
  <canvas class="fa-icon" width="90px" height="78px"></canvas>
</div>

P.S. Заметил закономерность: если добавить где нибудь в html коде хоть одну иконку, например, <i class="fa fa-search"></i>, то и иконка в canvas загружается как нужно

БЛОГ НА HUSL

Не отображается Fonts Awesome в canvas

Ответы (0 шт):