Помогите с Canvas. Прозрачные пиксели непонятного происхождения.
 

При выставлении ширины линии в 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, без него картинка на растянутом канвасе будет размытой.

Подозреваю, что у тебя та самая ситуация, которая описана здесь, в параграфе "Контуры". Надо добавить 0.5 к координатам.

https://webref.ru/layout/diveintohtml5/canvas

Спасибо большое)) 4 дня уже мучился. С прямоугольником проблема решилась добавлением +0.5 ctx.strokeRect(x+0.5,y + 0.5,width, height), с кругом пока нет, но хоть понятно куда копать. Еще не прочитал, но здесь как понимаю объяснение почему так происходит https://stackoverflow.com/questions/...ine-blurryness

С кругами не просто. Так же как и с другими кривыми и наклонными линиями.
Вроде есть свойство контекста imageSmoothingEnabled, которое нужно установить в false. Тогда не будет сглаживать, но появится ступенчатость.
См https://developer.mozilla.org/ru/doc...oothingEnabled