Как можно отрисовать и округлить два аватара в Canvas?

Question

[outplayedrq]

Добрый день, пытаюсь вывести два аватара в canvas, без округления - выводится, если делать округление только первой всё выводится. Делаю округление второй - выводится только первая. Я так понимаю, где-то я не там begin и closePath поставил, могли бы вы подсказать, что не так. Пример взят с документации Discord JS

// Output Avatar 1

  ctx.beginPath();
  ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.clip();

  const avatar1 = await loadImage(member.user.displayAvatarURL({ format: 'jpg' }));
  ctx.drawImage(avatar1, 25, 25, 200, 200);

// Output Avatar 2

  ctx.beginPath();
  ctx.arc(575, 125, 100, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.clip();

  const avatar2 = await loadImage(member.user.displayAvatarURL({ format: 'jpg' }));
  ctx.drawImage(avatar2, 500, 25, 200, 200);

Answer 1

[RAX7]

// Output Avatar 1
  ctx.save(); // <- сохраняем контекст
  ctx.beginPath();
  ctx.arc(125, 125, 100, 0, Math.PI * 2, true);
  ctx.closePath();
  ctx.clip();

  const avatar1 = await loadImage(member.user.displayAvatarURL({ format: 'jpg' }));
  ctx.drawImage(avatar1, 25, 25, 200, 200);
  ctx.restore(); // <- восстанавливаем контекст

тоже самое повторить со 2-ой картинкой

Comments

[outplayedrq]

Большое спасибо