JS.Canvas. Непонятные пиксели(тени) при рендеринге прямоугольника и круга

При выставлении ширины линии в 1(ctx.lineWidth = 1), получается такая картина видео

Линия сама толще чем задана. Цвет при отрисовке почему-то прозрачный и с каждым нарисованой фигурой, прозрачность уменьшается и только на 5 прямоугольнике прозрачность исчезает. У круга закрашиваются дополнительные пиксели, прозрачным цветом. Как-будто тени, но это не тени т.к. уже приписывал их отключение.

Но если задать ctx.lineWidth = 2, то проблема с прямоугольником исчезает и всё рендерится как надо, но с кругом проблема так и остаётся.

Координаты все целочисленные т.е. x = 5, а не x = 5.3467, что могло давать бы подобную картину. При рисовании карандашом в начале видео видно, что проблема не в этом.

function rectangle() {
  let x0, y0, x1, y1;
  let mouseDown;

  data.canv.addEventListener('mousedown', (e) => {
    if (data.tools.isRectangle === true) {
      mouseDown = true;

      //data.ctx.lineWidth = data.pixelSize;
      data.ctx.lineWidth = 1
      data.ctx.strokeStyle = data.colors.currentColor;
      //data.currentCtx.lineWidth = data.pixelSize;
      data.currentCtx.lineWidth = 1
      data.currentCtx.strokeStyle = data.colors.currentColor;

      x0 = Math.floor(e.offsetX / data.canvIndex);
      y0 = Math.floor(e.offsetY / data.canvIndex);
    }

    data.canv.addEventListener('mousemove', function mouseMove(e) {
      if (mouseDown === true) {
        data.ctx.clearRect(0, 0, data.canv.width, data.canv.height);

        x1 = Math.floor(e.offsetX / data.canvIndex);
        y1 = Math.floor(e.offsetY / data.canvIndex);

        data.ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
      }
    })

    data.canv.addEventListener('mouseup', () => {
      mouseDown = false;

      if (data.tools.isRectangle === true) {
        data.currentCtx.strokeRect(x0, y0, x1 - x0, y1 - y0);   

        data.ctx.clearRect(0, 0, data.canv.width, data.canv.height);
      }
    })
  })
}```