Переместить элемент холста в нужное положение

Question

Я попытался найти ответ на это всюду, но, похоже, я его не нашел. Но я хочу переместить текст, созданный из ввода, в определенную позицию на холсте, скажем, в верхнем центре.

код работает следующим образом: (JSFIDDLE)

<canvas id="canvas" style="background-color: #000" width="800px" height="300px"></canvas> 

<input type="text" id="header-text" placeholder="Your Title"> 

Между тем, JS выглядит следующим образом:

var canvas = document.getElementById('canvas'), 
    ctx = canvas.getContext('2d'); 


    document.getElementById('header-text').addEventListener('keyup', function() { 
    var stringTitle = document.getElementById('header-text').value; 
    console.log(stringTitle) 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.fillStyle = '#fff'; 
    ctx.font = 'bold 36px Arial'; 
    ctx.textAlign = 'center'; 
    var text_title = stringTitle; 
    ctx.fillText(stringTitle, 15, canvas.height/2 + 35); 
    }); 

Есть ли способ, где я могу переместить текст генерируемый в самом центре? Благодаря!

Answer 1

Ну, вы можете использовать математику для вычисления правильного положения. Вы использовали:

ctx.fillText(stringTitle, 15, canvas.height/2 + 35); 

так, чтобы изменить положение текста в верхнем центре вы можете использовать что-то вроде этого:

ctx.fillText(stringTitle, canvas.width/2, canvas.height/8 + 35); 

Answer 2

Чтобы текст в верхнем центре:

ctx.fillText(stringTitle, canvas.width/2, 36);

36 Где это размер вашего шрифта (высота). Если вам нужно больше точности при позиционировании текста по горизонтали, вы можете использовать CanvasRenderingContext2D.measureText().