Как я могу сделать две соединенные открытые дуги (без горизонтальной линии) на холсте HTML?

Я новичок в элементе холста в HTML и пытаюсь сделать что-то вроде ~, используя метод .arc().

Вот мой код: (или JSFiddle)

HTML

    <canvas height = "500" width = "500" id = "myCanvas"></canvas>

Javascript

    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext("2d");

    ctx.strokeStyle = '#000';
    ctx.fillStyle = "red";
    ctx.lineWidth = 3;

    ctx.beginPath();
    ctx.arc(50, 50, 50, 0, Math.PI, true);
    ctx.arc(150, 50, 50, 0, Math.PI);
    ctx.fill();
    ctx.stroke(); 

Я получаю горизонтальную линию, соединяющую начало и конец двух соединенных полукругов. Как я могу удалить это?