Маркировка осей графиков с помощью Canvas

Question

У меня сейчас есть довольно хороший график на холсте, но я бью стену с , помечающей мои оси .

Я не могу найти информацию о том, как разместить / написать текст на холсте. График основан на размере всего контента, поэтому я не могу предварительно все настроить или просто использовать фоновое изображение.

Есть два способа размещения текста:

1. Выровнено по правому краю в месте (x, y), чтобы метки слева боковая линия с границей графика.
2. По центру в месте (x, y) для надписей в нижней части моего график, а также несколько точек данных, написанных на графике.

Итак, как я могу рисовать текст на холсте? Или я иду в неправильном направлении, и мне нужно поместить текст в отдельные элементы блока и поместить их в CSS в абсолютном порядке?

Answer 1

Вы должны установить textAlign на значение right и textBaseline на значение middle.

Answer 2

Я закончил с помощью команды fillText().

context.fillStyle = "#444444"; // set color
context.font = "normal normal 14px Helvetica"; // set font weight, size, etc
context.textBaseline = "middle"; // how to align the text vertically
context.textAlign = "end"; // how to align the text horizontally
context.fillText("test1", 50, 50); // text, x, y

Для текста с центром, просто измените textAlign на "center".