Tengo dos medias elipses y estoy tratando de llenar el espacio entre ellas. Por alguna razón, el "relleno" se "torce" en el medio:
const canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 300; ctx.ellipse(150, 0, 150, 90, 0, 0, Math.PI); ctx.ellipse(150, 200, 150, 90, 0, 0, Math.PI); ctx.fillStyle = "lightgreen"; ctx.fill(); ctx.stroke(); <canvas id="canvas"></canvas>¿Alguna idea de cómo hacer que se llene para que sea como un cilindro (sin el lado más alejado en la parte superior)?
Supongo que todo lo que necesitaba era rotar una de las elipses y dibujarla al revés:
const canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 300; ctx.ellipse(150, 0, 150, 90, 0, 0, Math.PI); ctx.ellipse(150, 200, 150, 90, Math.PI, 0, Math.PI, true); //changed ctx.fillStyle = "lightgreen"; ctx.fill(); ctx.stroke(); <canvas id="canvas"></canvas>