Canvas — почему width выдает undefined?

Question

[Moe Green]

Вопрос новичка в canvas (буквально вчера его открыл для себя).

Минимальный код здесь - codepen.io/gearmobile/pen/JGERoB.

Что хочу получить этим кодом? Конечно - ширину canvas, чтобы потом центровать текст внутри этого canvas.

По идее должен получить width = 300px. Но в результате получаю только - undefined. У меня ступор. (

Answer 1

[Aleksandr Shpak]

UPD не по глазам было. У вас ошибка была - вы берёте width не от канваса, а от контекста. Обновил пример, старое удалил ))
Здесь исправленное https://jsfiddle.net/shpaker/hpLmuk23/

Comments

[Алексей Зуев]

Вовремя обновил) а то я уже хотел возмущаться)

[Moe Green]

хорошо, с этим вроде все понятно. но все же вопрос не до конца закрыт.

если по дефолту у canvas есть ширина и высота, то почему они не возвращаются тогда?

другими словами можно спросить (и ответить, возможно) - у контекста есть или нет метода (или свойства - не знаю, как правильно) width или height?

[Moe Green]

у контекста есть свойство ( или элемент - опять не знаю, как правильно) canvas; а вот у canvas уже есть свойства width и height? верно?

[Aleksandr Shpak]

Valery Semenencko: совсем нет. Когда делаем getElementById то получаем обычный элемент страницы, каким например может быть что угодно, хоть просто кнопка и у них есть высота и ширина.
А когда мы делаем getContext - мы создаем контекст для рисования и через него рисуем. И риовать можем хоть за пределами видимого элемента. По умолчанию ширина и высота канваса, как я уже писал 300*150. Вот пример без явно указанных свойств https://jsfiddle.net/shpaker/hpLmuk23/3/

[Aleksandr Shpak]

Алексей Зуев: самому стыдно стало, но я успел покаяться )

[Moe Green]

ок - спасибо!