Содержит текст в HTML-холсте

Question

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

Я пробовал использовать maxWidth, но это не работает, и мне интересно, есть ли у кого-нибудь идеи или как это сделать?

У меня есть скриншоты ввода и результат, который я получаю в настоящее время. Я попытался собрать его в jsfiddle, но по какой-то причине он не работает. Вы можете просмотреть его здесь, если это поможет - https://jsfiddle.net/whggn6vb/3/. Ниже приведена основная функция, которую я использую для рисования текста на холсте.

function updateCanvas() { 
    var maxWith = canvas.width; 
     context.clearRect(0, 0, canvas.width, canvas.height); 
     context.drawImage(imageObj, 0, 0); 
     context.textAlign = "center"; 

     context.font = "bold 36px Open Sans"; 
     context.fillText($('#quottext').val(), canvas.width * 0.5, 100); 

     context.font = "14px Open Sans"; 
     context.fillText($('#quotauthor').val(), canvas.width * 0.5, 200); 
} 

Answer 1

привет, если я получить вас правильно, вы должны быть в состоянии делать то, что вам нужно с measureText()

context.measureText (TXT) .width

как всегда, если вы выберете большой шрифт, он отобразит большой размер