Canvas: как задать font, а затем изменить размер?

Question

[Ragtime Kitty]

Привет.
Я хочу нарисовать текст в канвасе, и задать ему ширину равную размеру текста.

var
  canvas = document.querySelector('canvas'),
  ctx = canvas.getContext("2d"),
  text = "Apples"

ctx.font = "small-caps 44px Arial";
canvas.width = ctx.measureText(text).width;
ctx.font = "small-caps 44px Arial";

ctx.textBaseline = 'middle';
ctx.fillText(text, 0, canvas.height / 2);

Шрифт приходится задавать два раза, ибо если убрать до установки ширины, то, measureText будет высчитываться по дефолтному шрифту. Если убрать после, то сам текст будет рисоваться с дефолтным шрифтом. Пробовала сохранять контекст до установки ширины и восстанавливать после, но безрезультатно.

Что я делаю не так?

Answer 1

[Роман]

Похоже что изменяя canvas.width, параметры канваса сбрасываются в дефолтные, что на мой взгляд является логичным поведением. Если это так, то Вам надо либо искать решение с единожды заданной, фиксированной шириной канваса либо делать так как вы сделали (выставлять шрифт 2 раза)

PS: как и говорил, изменения размера канваса сбрасывают часть его параметров в дефолтные
https://www.w3.org/html/wg/spec/the-canvas-element.html

Comments

[Ragtime Kitty]

А почему save/restore не работает, если изменение размера сбрасывает параметры канваса?
Ведь font как раз должен сохранятся в состоянии.

https://jsfiddle.net/w2t4Lhgz/

[Роман]

Ragtime_Kitty, в ответе по сылке пишут:

When the canvas element is created, and subsequently whenever the width and height attributes are set (whether to a new value or to the previous value), the bitmap and any associated contexts must be cleared back to their initial state and reinitialized with the newly specified coordinate space dimensions.

Подозреваю, что сохраненные состояния тоже сбрасываются вместе с остальными параметрами

[Ragtime Kitty]

Роман, т.е. установка размеров канваса сбрасывает и все сохраненные состояния?

[Роман]

Ragtime_Kitty, по факту да, но документальное подтверждение в спецификациях пока не нагуглил. Как найду, дам ссылку.

Чтобы понять почему реализовали именно так, надо быть нкмного программистом, и желательно попробовать написать класс представляющмй линейную память в виде произвольного двухмерного массива. Тогда будет очевидно, что любое изменение размеров этого 2х мерного массива приводит к перевыделению памяти, проще и бысрее перевыделить память чем правильно перенести данные из старого массива в новый, линейное копирование тут не катит, ведь данные в 2хмерном массиве картинке связанны между собой не только по горизонтальной оси но и по вертикальной. С другой стороны алгоритм такого переноса совсем не сложен и легко реализуем, так же метаданные о шрифтах, цветах и прочем вообще не привязанны к размеру и вполне могли бы переноситься. Почему при разработке спецификации этого не слелали можно только гадать. Видимо потому, что в условиях переинициализации канваса посчитали данныйфункционал избыточным

[Роман]

Ragtime_Kitty, нашел. По сути об этом и говорится в том куске английского текста что дал выше. Вот его гуглперевод:
Когда элемент canvas создается, а затем всякий раз, когда устанавливаются атрибуты width и height (либо на новое значение, либо на предыдущее значение), растровое изображение и любые связанные с ним контексты должны быть очищены обратно в свое исходное состояние и повторно инициализированы с помощью вновь указанного размеры координатного пространства

То есть при установке размеров происходит полная переинициализация канваса и отчистка всех связанных с ним контекстов.

[Ragtime Kitty]

Вот оно как. Ну, значит так и оставлю с двумя font.
Спасибо, что помогли разобраться

[Роман]

Ragtime_Kitty, рад был помочь