Why can’t I fill() this shape? What’s the problem? stroke() works, but not fill().

https://jsfiddle.net/KriegersVan/2fm8oyzv/22/

Thanks for your help!

And now I’m adding some extra text because the question review process is too strict. So it wants me to write some more words in here, which I am now doing.

 var visibleCtx = document.getElementById("canvas").getContext("2d");  var bottomCirclesY = window.innerHeight * 0.50;  var bottomCirclesX = [     window.innerWidth / 4,     window.innerWidth / 2,     window.innerWidth - (window.innerWidth / 4)  ];  var topCircleY = window.innerHeight * 0.20;  var topCircleLeftX = (window.innerWidth / 2) - (window.innerWidth * 0.17);  var topCircleRightX = (window.innerWidth / 2) + (window.innerWidth * 0.17);  var bottomLeftCircleLeftX = bottomCirclesX[0] - (window.innerWidth * 0.08);  var bottomLeftCircleRightX = bottomCirclesX[0] + (window.innerWidth * 0.08);  var halfwayBetweenTopAndBottomY = topCircleY + ((bottomCirclesY - topCircleY) / 2);  var bottomMiddleCircleLeftX = bottomCirclesX[1] - (window.innerWidth * 0.08);  var bottomMiddleCircleRightX = bottomCirclesX[1] + (window.innerWidth * 0.08);  var bottomRightCircleLeftX = bottomCirclesX[2] - (window.innerWidth * 0.08);  var bottomRightCircleRightX = bottomCirclesX[2] + (window.innerWidth * 0.08);   visibleCtx.beginPath();  //Draw left tube:  //Draw left line:  visibleCtx.moveTo(     topCircleLeftX,     topCircleY);  visibleCtx.lineTo(     bottomLeftCircleLeftX,     bottomCirclesY);  //Draw right line:  visibleCtx.moveTo(     topCircleLeftX + (window.innerWidth * 0.08),     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomLeftCircleRightX,     bottomCirclesY);  //Draw center tube:  //Draw left line:  visibleCtx.moveTo(     bottomMiddleCircleLeftX,     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomMiddleCircleLeftX,     bottomCirclesY);  //Draw right line:  visibleCtx.moveTo(     bottomMiddleCircleRightX,     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomMiddleCircleRightX,     bottomCirclesY);  //Draw right tube:  //Draw left line:  visibleCtx.moveTo(     topCircleRightX - (window.innerWidth * 0.08),     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomRightCircleLeftX,     bottomCirclesY);  //Draw right line:  visibleCtx.moveTo(     topCircleRightX,     topCircleY);  visibleCtx.lineTo(     bottomRightCircleRightX,     bottomCirclesY);  //Connect the lines:  //Draw left connector:  visibleCtx.moveTo(     topCircleLeftX + (window.innerWidth * 0.08),     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomMiddleCircleLeftX,     halfwayBetweenTopAndBottomY);  //Draw right connector:  visibleCtx.moveTo(     topCircleRightX - (window.innerWidth * 0.08),     halfwayBetweenTopAndBottomY);  visibleCtx.lineTo(     bottomMiddleCircleRightX,     halfwayBetweenTopAndBottomY);  //Connect the top lines:  visibleCtx.moveTo(     topCircleLeftX,     topCircleY);  visibleCtx.lineTo(     topCircleRightX,     topCircleY);  //Connect the bottom lines  //Draw the left tube line:  visibleCtx.moveTo(     bottomLeftCircleLeftX,     bottomCirclesY);  visibleCtx.lineTo(     bottomLeftCircleRightX,     bottomCirclesY);  //Draw the center tube line:  visibleCtx.moveTo(     bottomMiddleCircleLeftX,     bottomCirclesY);  visibleCtx.lineTo(     bottomMiddleCircleRightX,     bottomCirclesY);  //Draw the right tube line:  visibleCtx.moveTo(     bottomRightCircleLeftX,     bottomCirclesY);  visibleCtx.lineTo(     bottomRightCircleRightX,     bottomCirclesY);   visibleCtx.fillStyle = "#18dbd8";  visibleCtx.lineJoin = "round";  visibleCtx.strokeStyle = "#ffffff";  visibleCtx.fill();  visibleCtx.stroke();  visibleCtx.closePath();