При выставлении ширины линии в 1(ctx.lineWidth = 1), получается такая картина
https://drive.google.com/open?id=1Hh...lTGJFfZSD3ibGj
Линия сама толще чем задана. Цвет при отрисовке почему-то прозрачный и с каждым нарисованой фигурой, прозрачность уменьшается и только на 5 прямоугольнике прозрачность исчезает. У круга закрашиваются дополнительные пиксели, прозрачным цветом. Как-будто тени, но это не тени т.к. уже приписывал их отключение.
Но если задать ctx.lineWidth = 2, то проблема с прямоугольником исчезает и всё рендерится как надо, но с кругом проблема так и остаётся.
Координаты все целочисленные т.е. x = 5, а не x = 5.3467, что могло давать бы подобную картину. При рисовании карандашом в начале видео видно, что проблема не в этом.
Сначала думал что проблема в том что задаю канвасу размеры допустим canvas.width = 32; canvas.height =32 и потом растягиваю в css на ширину контейнера.
Но тут набросал на кодопен, задавая размеры не через CSS, codepen.io/andreykokorev/pen/RwPKjWw и точно такая же картина. Если увеличить на максимум, то будет видно те же самые проблемы: грани прямоугольника прозрачные, шире заданных и прозрачные пиксели у круга. Задав ширину лини в 2, толщина граней также не увеличивается, а просто они теряют прозрачность. Получается проблема не в css, что в принципе и логично, css просто расстягивает и эту проблему сразу видно.
Как с этим бороться, почему такое вообще происходит?И растягивание канваса это плохая практика или нет? Не зря же сделали свойство CSS image-randering: pixelated, без него картинка на растянутом канвасе будет размытой.
