Boa noite galera, é o seguinte, preciso preencher o sorriso do Snowman de vermelho. Mas não estou conseguindo, não sei se é porque estou algum erro no código ou se estou desenhando o sorriso errado. O sorriso eu desenhei com um semi círculo e tracei uma linha embaixo. Não sei se dá para fazer um semi círculo gordo sem traçar linha embaixo. O smile/sorriso está entre as linhas 56 e 60 Bom, segue o código que fiz:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
const width = 800;
const height = 500;
const MID = width / 2;
const GROUND = 400;
ctx.fillStyle = "cyan";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "blue";
ctx.fillRect(0, GROUND, width, 100); // ground
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(800, -10, 80, 0, 2 * Math.PI); // SUN REVERSE
ctx.fill()
ctx.fillStyle = "black";
ctx.font = "14px Arial";
ctx.fillText("SAY HELLO TO MY SNOWMAN", 0, 11);
ctx.fillStyle = "white";
ctx.beginPath();
ctx.translate(40,0);
ctx.arc(MID, GROUND - 265, 40, 0, 2 * Math.PI); // head
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND - 160, 70, 0, 2 * Math.PI); // upper torso
ctx.fill();
setTimeout
ctx.fillStyle = "red"; // BUTTONS
ctx.beginPath();
ctx.arc(400, 225, 5, 0, 2 * Math.PI);
ctx.arc(400, 255, 5, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.arc(MID, GROUND, 100, 0, 2 * Math.PI); // lower torso
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(MID - 15, GROUND - 275, 5, 0, 2 * Math.PI); // left eye
ctx.arc(MID - -15, GROUND - 275, 5, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(MID, GROUND - 260, 20, 25.1, Math.PI); // smile
ctx.lineTo(MID - -20, GROUND - 260);
ctx.stroke();
ctx.moveTo(MID - 50, GROUND - 160);
ctx.lineTo(MID - 140, GROUND - 160); // left arm
ctx.stroke();
ctx.moveTo(550,200);
ctx.lineTo(450,240); // RIGHT arm
ctx.stroke();
ctx.moveTo(MID - 50, GROUND - 300);
ctx.fillStyle = "red";
ctx.lineTo(MID + 50, GROUND - 300); // brim of hat
ctx.stroke();
ctx.fillRect(MID - 30, GROUND - 340, 60, 40);
<canvas id="myCanvas" width="800" height="600"></canvas>