Есть ли способ получить ширину и высоту внутреннего содержимого Canvas?

Question

Есть ли способ получить внутреннюю ширину и высоту холста на основе его содержимого?

Я хочу разрешить пользователю писать текст на холст, и пользователю разрешено выбирать размер шрифта, семейство шрифтов и т. Д. Проблема в том, что они имеют контроль над шрифтом и длиной текста, который я не делаю есть способ узнать, как установить ширину и высоту холста.

Итак, есть ли способ, чтобы холст был таким же большим, как и содержимое внутри него (например, свойство «встроенный блок» на экране дисплея) или способ получить ширину и высоту внутреннего содержимого холста (в этом случае я бы просто отрегулировал ширину и высоту после каждой буквы в тексте)?

Answer 1

Да, есть. Поместите дочерний элемент внутри холста. установите дочерний элемент css как position: absolute; и width: 100%;, который примет полный размер его контейнера.

Answer 2

Если вы знаете, что холст будет содержать текст с определенным шрифтом/шрифтом, вы можете использовать функцию canvas measureText. Смотрите этот отрывок здесь:

http://www.w3schools.com/tags/canvas_measuretext.asp

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); ctx.font="30px Arial"; 
var txt="Hello World" 
ctx.fillText("width:" + ctx.measureText(txt).width,10,50) 
ctx.fillText(txt,10,100);