0
113
ViewsFill between 2 partial ellipses
I have two half-ellipses and I'm trying fill the space between them. For whatever reason the "fill" is getting "twisted" in the middle:
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>Any ideas how to make it fill so it's like a cylinder (without far side on top)
·
Juan Pablo Isaza
1 answers
Answer question0
I guess all it need was rotate one of the ellipses and draw it in reverse:
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>
·
Juan Pablo Isaza
Report
Answer question