Как нарисовать текст на холсте html-5 с учетом правого нижнего угла x, y

Question

Кто-нибудь знает, как рисовать текст на холсте html-5, учитывая его нижние правые координаты x, y?.FillText ("text", x, y) рисует верхний левый угол текста в точке x, y. Мне нужно нарисовать нижний правый угол в точке x, y.Если кто-нибудь знает ответ, это было бы очень полезно.

Answer 1

получить ширину, используя ширину текста меры

var width = ctx.measureText("text");

и (если вам это нужно) приблизительную высоту можно получить с помощью размера шрифта

ctx.font = "25px serif";
var height = parseInt(ctx.font.substring(0, 2)); // gets the font size

и так как он рендерит внизу слева, вам просто нужно минус

ctx.fillText("text", x - width, y);

Answer 2

Используйте функцию measureText ().

const width = context.measureText("text").width;
const height = context.measureText("text").height;
context.fillText("text", x - width, y - height);