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

const drawQuarterCircle = (origin, radius, startAngleDeg = 0) => {
	const startAngle = startAngleDeg * (Math.PI / 180);
	const endAngle = startAngle + Math.PI * 0.5;
	ctx.beginPath();
	ctx.moveTo(origin.x, origin.y);
	// Draw actual arc
	ctx.arc(origin.x, origin.y, radius, startAngle, endAngle, false);
	ctx.fill();
}

const radius = 60;
ctx.fillStyle = 'red';

// Draw a quarter circle, clockwise, upper right
drawQuarterCircle({
	x: 0,
	y: 0
}, radius);

// Draw another one, below, anticlockwise
drawQuarterCircle({
	x: 0,
	y: 140
}, radius, 270);

// Draw a third, upper right
// Draw another one, below, anticlockwise
drawQuarterCircle({
	x: 140,
	y: 0
}, radius, 90);

// Draw a final one, lower right
drawQuarterCircle({
	x: 140,
	y: 140
}, radius, 180);