Почему не работает fill()(заполнение фона)?

Question

[Ingernirated]

Почему не работает fill()?
Нарисовал домик, хотел зарисовать его внутри, но он не заливает выделенное, хотя всё, как в примере.
И почему, если задавать размеры канваса не на html, то квадрат рисуется прямоугольником на 2-ом примере?
https://jsfiddle.net/szLqm572/2/

Comments

[Ingernirated]

Анвар Шахмаев: 1-ый пример, не заливается нарисованное.
2-ой, вместо квадрата нарисован прямоугольник, как это можно исправить, если задавать размер канваса не а html Документе, а в js или css

[Сергей delphinpro]

Зачем там так много перемещений карандаша? Уберите их.
https://jsfiddle.net/szLqm572/3/

[Сергей delphinpro]

2) https://jsfiddle.net/szLqm572/4/

[Ingernirated]

Сергей: спасибо!!
это из книжки пример был с повторяющимися moveTo,lineTo.

[Сергей delphinpro]

Ingernirated: фиговая видно книжка.
moveTo - устанавливает карандаш, lineTo проводит линию
Если провели линию в точку lineTo(100,100), то карандаш уже в этой точке, не нужно устанавливать его снова туда же, тем самым разрывая линию и начиная новый контур. в результате получается незамкнутый контур и заливать нечего. На самом деле контур автоматически замыкается методом closePath, но с таким подходом он замкнется на последний moveTo и получится просто линия(прямая), в которой опять же заливать нечего.

[Сергей delphinpro]

Ingernirated: И контуры всё же лучше закрывать явно
https://jsfiddle.net/szLqm572/5/
https://jsfiddle.net/szLqm572/6/

[Ingernirated]

Сергей: благодарю, а подскажите ещё пожалуйста, как задается анимация рисования?
https://jsfiddle.net/szLqm572/8/
через transition почему-то отрисовывается сам шаблон, а не полосы.
и напишите пожалуйста в ответах, чтобы я мог закрыть вопрос.

Answer 1

[Макс _]

После lineTo() не нужно делать moveTo() в ту же точку.