Пирог холст анимации показать полный круг на одном кадре

Question

У меня круговая диаграмма, похожая на анимацию роста / сжатия, но в середине на одном кадре отображается круг с заливкой, как мне от него избавиться?

var canvas = document.querySelector('canvas');

var ctx = canvas.getContext('2d');
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0;
var start = false;  
setInterval(function() {
  ctx.clearRect(0, 0, 32, 32);
  ctx.fillStyle = '#F00A0A';
  ctx.beginPath();
  if (start) {
    ctx.arc(16, 16, 12, angle, 0);
  } else {
    ctx.arc(16, 16, 12, 0, angle);
  }
  ctx.lineTo(16, 16);
  ctx.fill();
  angle += increase;
  if (angle >= max) {
    angle = 0;
    start = !start;
  }
}, 20);

<canvas width="32" height="32"/>

Я пробовал это:

  if (angle !== 0) {
    ctx.beginPath();

    if (start) {
      ctx.arc(16, 16, 12, angle, 0);
    } else {
      ctx.arc(16, 16, 12, 0, angle);
    }
    ctx.lineTo(16, 16);
    ctx.fill();
  }

но это не работает, когда сторона изменения дуги показывает полный круг для одного кадра.

Answer 1

Самое простое решение - просто слегка сместить угол.

Таким образом, при смене режима рисования круг не является «завершенным»:

var canvas = document.body.appendChild(document.createElement('canvas'));
var canvasSize = canvas.width = canvas.height = 100;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#F00A0A';
var increase = Math.PI * 2 / 100;
var max = Math.PI * 2;
var angle = 0.0000001;
var start = false;
function update() {
    ctx.clearRect(0, 0, canvasSize, canvasSize);
    ctx.beginPath();
    ctx.arc(canvasSize / 2, canvasSize / 2, canvasSize / 3, angle, 0, start);
    ctx.lineTo(canvasSize / 2, canvasSize / 2);
    ctx.fill();
    angle += increase;
    if (angle >= max) {
        angle = angle % max;
        start = !start;
    }
    requestAnimationFrame(update);
}
update();