Stroke canvas elements as if they’re one element

I have a canvas with multiple circles and want to stroke them as if they are 1.

as you can see, it is all drawn on their own

  context.beginPath();
  context.fillStyle = "#F9F8F3";
  context.arc(0, height/6*4, width/6, 0, Math.PI*2);
  context.arc(width/6*1.9, height/6*4.45, width/6*1.25, 0, Math.PI*2);
  context.arc(width/6*3.75, height, width/6, 0, Math.PI*2);
  context.arc(width/6*5.5, height/6*4, width/5, 0, Math.PI*2);
  context.stroke();

image with all circles being stroked

its supposed to look kind of like this
example for desired output