Как в javascript центрировать текст, когда я рисую его на холсте? ⇐ Html

[Гость]

В javascript я могу нарисовать текст, выровненный по левому краю. Я пытаюсь выровнять его по центру холста.

Размеры холста считываются непосредственно с HTML-холста

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

const cnv = document.getElementById('sketch'); const ctx = cnv.getContext('2d'); const centerX = cnv.width/2; const centerY = cnv.height/2; Если значение state отображается на холсте, оно выравнивается по левому краю

пусть состояние = 1; функция drawStateTextLeft (состояние) { const text = `${state + 1}`; ctx.fillText(`${state+1}`, 10, 30); // появляется текст } Я предполагаю, что рисование того же текста, выровненного по центру холста, — это простой вопрос измерения ширины текста и смещения начала текста на половину ширины текста от горизонтального центра.

например

function drawStateTextCentre(state) { const text = `${state + 1}`; const textWidth = ctx.measureText(text).width; // Вычисляем ширину текста вар textX = centerX - textWidth/2; // Вычисляем позицию X для центрирования текста // alert(centreX + "\t" + textWidth + ”\t” + textX); ctx.fillText(текст, textX, 30); // текст не появляется } В alert показано, что centreX имеет значение 195, textWidth имеет значение 13,3434 и textX имеет значение 181,656. Однако текст не отображается.

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