Html canvas text font size

Canvas font Property

Write a 30px high text on the canvas, using the font «Arial»:

const canvas = document.getElementById(«myCanvas»);
const ctx = canvas.getContext(«2d»);

ctx.font = «30px Arial»;
ctx.fillText(«Hello World», 10, 50);

Description

The font property sets or returns the font properties for canvas text.

The font property uses the same syntax as the CSS front property.

The default value is 10px sans-serif.

Se Also:

Syntax

Property Values

Browser Support

The element is an HTML5 standard (2014).

font is supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Рисование текста

После того, как мы увидели в предыдущей главе, как применять стили и цвета, взглянем на написание текста в canvas.

Рисование текста

Контекст рендеринга canvas предоставляет два метода для рисования текста:

Вставляет заданный текст в положении (x,y). Опционально может быть указана максимальная ширина.

Вставляет контур заданного текста в положении (x,y). Опционально может быть указана максимальная ширина.

Пример fillText

Текст вставлен с использованием текущего fillStyle .

function draw()  var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); > 

canvas id="canvas" width="300" height="100">canvas> 

Пример strokeText

Текст вставлен с использованием текущего strokeStyle .

function draw()  var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); > 

canvas id="canvas" width="300" height="100">canvas> 

Стилизация текста

В примерах выше мы уже использовали свойство font для изменения размера текста. Кроме него существуют ещё несколько свойств, позволяющие настроить вывод текста на canvas:

Это основной стиль, который будет использоваться для вывода текста. Строка имеет такой же синтаксис, как CSS-свойство font . По умолчанию — sans-serif высотой 10px.

Настройка выравнивания текста. Возможные значения: start , end , left , right или center . По умолчанию — start .

Настройка выравнивания текста по вертикали. Возможные значения: top , hanging , middle , alphabetic , ideographic , bottom . По умолчанию — alphabetic .

Направление текста. Возможные значения: ltr , rtl , inherit . По умолчанию — inherit .

Эти свойства могут быть вам знакомы если вы работали с CSS.

Изображение от WHATWG ниже показывает различные варианты свойства textBaseline .

Пример textBaseline

Редактируя код ниже, вы можете видеть, как меняется отображение текста на canvas в реальном времени:

.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world!", 0, 100); 

canvas id="canvas" width="400" height="200" class="playable-canvas">canvas> div class="playable-buttons"> input id="edit" type="button" value="Edit" /> input id="reset" type="button" value="Reset" /> div> textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);textarea> 

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas()  ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); > reset.addEventListener("click", function()  textarea.value = code; drawCanvas(); >); edit.addEventListener("click", function()  textarea.focus(); >) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); 

Измерение ширины текста

Для измерения ширины текста (без рисования его на canvas) можно воспользоваться следующим методом:

Возвращает объект TextMetrics (en-US), содержащий ширину текста в пикселах, до отрисовки на canvas.

Пример ниже показывает, как можно измерить ширину текста.

function draw()  var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; > 

Примечания

В ранних версиях Gecko (движок рендеринга в Firefox, Firefox OS и других приложениях Mozilla) были реализованы методы API с префиксами для рисования текста на canvas. На данный момент они устарели и уже, возможно, удалены, поэтому их правильная работа не гарантируется.

Found a content problem with this page?

This page was last modified on 8 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Выводим текст на HTML5 Canvas

HTML5 Canvas – очень обширная тема со многими “вкусностями”, о многих из которых уже писали и ещё будут писать. Поэтому, я хочу немного рассказать в этой статье, только об одной маленькой, и как на первый взгляд может показаться банальной темой – работа с текстом. Я хочу показать, что с ним почти также можно работать, как с обычным текстом в вебе, т.е. позиционировать, накладывать стили и градиенты, а также писать многострочные предложения легко и без проблем.

Простой текст

Чтобы вывести обычный текст, можно воспользоваться двумя функциями контекста fillText() и strokeText().
Эти функции принимают три обязательных параметра: сам текст и координаты X и Y, т.е. место его расположения, и последний – необязательный: максимальная ширина текста, если вы зададите максимальную ширину текста меньше, чем фактическая ширина, то текст сожмется до указанной вами ширины. Не советую задавать максимальную ширину, так как при сжатии и у него становится плохой вид. Вместо такого сжатия рекомендую переносить текст на новую строку, стандартной функции для этого нет, но я приведу пример, как это легко реализовывается.
Если просто вывести текст при помощи таких функций, то такой текст будет мелкий и невзрачный. Это мы можем исправить задав ему шрифт в переменную контекста font. Шрифт задается, также как и в CSS ([font style][font weight][font size][font face]). Пример:

 ctx.fillStyle = "#00F"; ctx.strokeStyle = "#F00"; ctx.font = "italic 30pt Arial"; ctx.fillText("Fill text", 20, 50); ctx.font = 'bold 30px sans-serif'; ctx.strokeText("Stroke text", 20, 100); 

Расположение текста

Есть два стандартных способа позиционирования текста, относительно своего расположения: вертикальное и горизонтальное.
Вертикальное позиционирование задается при помощи textBaseline, в неё устанавливается один из возможных вариантом: top, hanging, middle, alphabetic, ideographic и bottom.

 ctx.textBaseline = "bottom"; ctx.fillText("bottom", 400, 75); 

А горизонтально при помощи textAlign, может быть один из следующих параметров: center, start, end, left, right.

 context.textAlign = "center"; ctx.textBaseline = "bottom"; context.fillText("center", 250, 20); 

Эти способы далеко не идеальны и при помощи них иногда проблематично спозиционировать текст, так как хочется именно вам. Ниже я опишу способ, как можно использовать своё позиционирование, даже многострочного текста.

Стилизация
Самое простое, как мы можем стилизовать текст, это задать ему цвет. Цвет задается при помощи fillStyle – для задания цвета заливки и strokeStyle – для задания цвета обводки.
Так же как и в CSS3 можно накладывать тени и на текст в канвасе. Это делается при помощи: shadowColor – задание цвета тени, shadowOffsetX и shadowOffsetY – задание отступа и shadowBlur – задание размытия тени.

 ctx.shadowColor = "#F00"; ctx.shadowOffsetX = 5; ctx.shadowOffsetY = 5; ctx.shadowBlur = 5; ctx.strokeText("Shadow text", 20, 100); 

Поддерживаются также и градиенты для текста. Сам градиент создается при помощи функции createLinearGradient(). А при помощи функции addColorStop() задаются цвета и позиции их в нём. Текст заливается градиентом также как и сплошным цветом, при помощи fillStyle и strokeStyle.

 var gradient = ctx.createLinearGradient(0, 0, 0, 60); gradient.addColorStop(0.0, 'rgba(0, 0, 255, 1)'); gradient.addColorStop(0.3, 'rgba(128, 0, 255, 0.6)'); gradient.addColorStop(0.6, 'rgba(0, 0, 255, 0.4)'); gradient.addColorStop(1.0, 'rgba(0, 255, 0, 0.2)'); ctx.fillStyle = gradient; 

Кроме обычной заливки и заливки градиентом можно также залить какой-либо текстурой. Для этого необходимо до начала вывода текста загрузить изображение-текстуру. А затем при помощи createPattern() создать текстуру на его основе. Можно задать, чтобы изображение повторялось либо нет.

 var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; 

Ширина текста и многострочный текст

Допустим, вам необходимо написать текст на канвасе неограниченной длинны, будь то одно слово, или несколько предложений. Если вы будете его писать как есть, т.е. весь текст вставите в fillText(), то на экране будет видна только та часть, которая по своей ширине не превышает ширину канваса. Т.е. если ширина канваса 400 пикселей, то вы не уведете текст, который выходит за его ширину. Для того, чтобы сделать многострочный текст необходимо исхитрится. Но алгоритм прост. Сначала высчитываем ширину текста, сверяем её с максимальной шириной области, куда мы хотим вывести этот текст. Если ширина текста не превышает ту ширину, то выводим текст, а если превышает, то разбиваем текст самым удобным для вас способом, я предпочитаю разбивать по пробелам.
Для того чтобы высчитать ширину текста можно воспользоваться функцией measureText(), которая отдает в объектной форме ширину текста (к сожалению данная функция не отдает высоту текста, надеюсь эта возможность будет добавлена, но а пока придется высчитывать иными способами, как именно далее в статье).
Пример:

function wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight) < var words = text.split(" "); var countWords = words.length; var line = ""; for (var n = 0; n < countWords; n++) < var testLine = line + words[n] + " "; var testWidth = context.measureText(testLine).width; if (testWidth >maxWidth) < context.fillText(line, marginLeft, marginTop); line = words[n] + " "; marginTop += lineHeight; >else < line = testLine; >> context.fillText(line, marginLeft, marginTop); > var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var maxWidth = 400; //размер поле, где выводится текст var lineHeight = 25; /*если мы знаем высоту текста, то мы можем предположить, что высота строки должна быть именно такой*/ var marginLeft = 20; var marginTop = 40; var text = "Сначала мы разбиваем текст на слова по пробелам, а потом обходим эти слова в цикле, " + "объединяя их по одному в строку. Если при последнем объединении ширина этой строки меньше максимальной, " + "то продолжаем, а если больше, то выводим строку без последнего слова, а его записываем в новую строку." + "И так продолжаем, пока не обработаем весь текст."; context.font = "16pt Calibri"; context.fillStyle = "#000"; wrapText(context, text, marginLeft, marginTop, maxWidth, lineHeight); 

Вроде как всё хорошо, не нужно задавать координаты текста, самому вручную вычислять влезет ли текст по ширине или нет. Почти всё автоматизировано и выглядит неплохо, но остается всё-таки маленький нюанс, высота текста у нас захардкоджена, по этому при смени шрифта или размера придется каждый раз подправлять вручную высоту текста (в примере переменная lineHeight).

Определяем высоту текста

При работе с текстом на канвасе ни функция measureText(), ни одна другая не дают нам определить высоту текста. Всё же можно справиться и с этой бедой, вариант решения этой проблемы, который я хочу предложить вам, не очень красив, но всё же оно работает.
Когда мы задаем стиль текста (размер и стиль шрифта) в font, то мы его задаем в таком же стиле, так как бы мы его задавали в CSS. Шрифты и их размеры, конечно если доступен такой шрифт в канвасе, то также он будет доступен и в обычных стилях.
И так, идея вот в чем, у нас есть размер и тип шрифта в переменной font, мы создаем в DOM новый элемент, туда помещаем текст, и устанавливаем стили из той переменной. Далее при помощи offsetHeight получаем высоту элемента, которая и будет высотой нашего текста. После этого можем благополучно удалить этот элемент из DOM.
Пример реализации этой идеи:

var text = "Этот текст должен быть написан справа в самом низу."; var marginLeft = canvas.width - context.measureText(text).width; var marginTop = canvas.height - getFontHeight(context.font); context.fillText(text, marginLeft, marginTop); function getFontHeight(font)

Буду рад, если кто-то предложит более красивый или правильный вариант получения высоты текста.
Спасибо.

Источник