Como hacer una sonrisa

Hice funcion que graficase una sonrisa, pero no me convence la forma de como lo logre. Cree un semicirculo, luego enmascare una parte con el color del fondo para parecer un semicirculo vacio. Existe una forma de llegar a eso sin tener que hacer otro con el color del fondo?

Dejo codigo:

<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "lightgray";
    pincel.fillRect(0, 0, 600, 400);

    function dibujarCirculo(x, y, radio, color) {

        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, 2*3.14);
        pincel.fill();
    }

    function dibujarFlor(x, y){

        dibujarCirculo(x, y, 20, "red");
        dibujarCirculo(x + 40, y, 20, "black");
        dibujarCirculo(x, y + 40, 20, "blue");
        dibujarCirculo(x, y - 40, 20, "yellow");
        dibujarCirculo(x - 40, y , 20, "orange");
    }

    function sonrisa(x, y, radio, color){
        pincel.fillStyle = color;
        pincel.beginPath();
        pincel.arc(x, y, radio, 0, (2*3.14) / 2);
        pincel.fill();
    }

    dibujarFlor(200, 100);
    dibujarFlor(400, 100);

    sonrisa(300, 250, 100, "red");
    sonrisa(300, 240, 100, "lightgray");
</script>