为什么这个形状不填充（）？

为什么我不能fill（）这个形状？有什么问题？stroke（）有效，但fill（）无效。

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

谢谢你的帮助！

现在，我添加了一些额外的文本，因为问题复查过程太严格了。所以它要我在这里写一些更多的单词，我现在正在做。

 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();