Текст

У контекста двумерного холста есть методы fillText и strokeText. Последний можно использовать для обведённых букв, но обычно используется fillText. Он заполняет заданный текст цветом fillColor.

<canvas></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  cx.font = "28px Georgia";

  cx.fillStyle = "fuchsia";

  cx.fillText("Я и текст могу рисовать!", 10, 50);

</script>

Можно задать размер, стиль и шрифт текста через свойство font. В примере задаётся только размер и шрифт. Можно добавить наклон и жирность в начале строки.

Два последних аргумента fillText (и strokeText) задают позицию, с которой начинается текст. По умолчанию это начало линии, на которой «стоят» буквы – не считая свисающих частей букв типа р и у. Можно менять позицию по горизонтали, задавая свойству textAlign значения "end" или "center", а по вертикали – задавая textBaseline "top", "middle", или "bottom".

В конце главы мы вернёмся к нашей диаграмме.