Интересная / проблемная причуда отображения текста на элементе canvas, когда браузер (в данном случае Chrome) имеет минимальный размер шрифта, установленный по умолчанию со значения 1px. Если элемент canvas отображается в DOM, размер запрашиваемого мной шрифта учитывается, игнорируя пользовательские настройки. Если элемент создается динамически, но не вставляется в DOM, пользовательский параметр минимального размера шрифта может переопределить сценарий. Интересно, что если вместо этого используется объект OffscreenCanvas, он ведет себя так же, как и в случае 1 - маленький шрифт, запрошенный через скрипт, учитывается.
// Same code used to write to all three canvas elements
const ctx = elem.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "8px Arial";
ctx.fillText("Hello", 10, 10);
Если я проверю ctx.font в случае 2, он изменится на «15px Arial» или другой завышенный размер в зависимости от настроек Chrome. В двух других случаях он остается запрошенным в 8 пикселей.
Образец кодепа: https://codepen.io/anon/pen/zXPEGG
Снимок экрана вывода в Chrome с минимальным размером шрифта, установленным на 15. Первая строка - это элемент canvas в DOM; второй элемент canvas не в DOM; третий - OffscreenCanvas:
Это ожидаемое поведение? Ошибка в Chrome? Присоединение динамически созданного холста к DOM - это один из возможных обходных путей, хотя и не идеальный. Любые другие предложения?