Нарисовать "круглую" линию без разрывов

Question

Стоит задача нарисовать скругленную линию.

Пытался так, однако линия разрывается:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let onCursor = false;

const settings = {
  color: "#000000",
  tool: "pencil-arc",
  size: 50
}

function relativeCoors(ev) {
  return {
    x: ev.pageX - ev.target.offsetLeft,
    y: ev.pageY - ev.target.offsetTop
  };
}

canvas.addEventListener('mousedown', ev => {
  onCursor = true;
});

canvas.addEventListener('mouseup', ev => {
  onCursor = false;
  ctx.beginPath();
})

canvas.addEventListener('mousemove', ev => {
  if (!onCursor) {
    return;
  }
  const { x, y } = relativeCoors(ev);

  switch (settings.tool) {
    case 'pencil-arc':
      ctx.arc(x, y, settings.size / 2, 0, Math.PI * 2);
      ctx.fillStyle = settings.color;
      ctx.fill();
      ctx.beginPath();
      ctx.lineWidth = settings.size;
      ctx.strokeStyle = settings.color;
      ctx.lineTo(x, y);
      ctx.stroke();
      break;
  }
});

<canvas id="paint">
  Sorry, your browser does not support the &lt;canvas&gt;
</canvas>

Answer 1

В коде не хватало установки начального положения с помощью .moveTo

А так же сохранения начальной точки.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let onCursor = false;

const settings = {
  color: "#000000",
  tool: "pencil-arc",
  size: 50
}

function relativeCoors(ev) {
  return {
    x: ev.pageX - ev.target.offsetLeft,
    y: ev.pageY - ev.target.offsetTop
  };
}

var old;
canvas.addEventListener('mousedown', ev => {
  onCursor = true;
  old = relativeCoors(ev); // сохраняем начальную точку линии
});

canvas.addEventListener('mouseup', ev => {
  onCursor = false;
})

canvas.addEventListener('mousemove', ev => {
  if (!onCursor) {
    return;
  }
  const { x, y } = relativeCoors(ev);

  switch (settings.tool) {
    case 'pencil-arc':
      ctx.arc(x, y, settings.size / 2, 0, Math.PI * 2);
      ctx.fillStyle = settings.color;
      ctx.fill();

      ctx.lineWidth = settings.size;
      ctx.strokeStyle = settings.color;

      ctx.beginPath();
      ctx.moveTo(old.x, old.y); // переносим перо в начальную точку
      ctx.lineTo(x, y);
      ctx.stroke();
      ctx.closePath();
      old = { x, y }; // обновляем значение начальной точки
      break;
  }
});

<canvas id="paint">
  Sorry, your browser does not support the &lt;canvas&gt;
</canvas>

БЛОГ НА HUSL

Нарисовать "круглую" линию без разрывов

Ответы (1 шт):