lienzo HTML5: rutas superpuestas que no se llenan correctamente

Question

Extraño problema con el lienzo HTML5: estoy tratando de dibujar una forma dentro de otra. La forma externa es azul y la roja interna, pero el resultado final es que ambas formas terminan en rojo. Si paso a través del código, puedo ver la forma azul representada correctamente, pero la forma roja se vuelve azul sobre el azul, aunque sea más pequeño. Probablemente un problema con las cosas BeginPath/Endpath, pero aparentemente he probado todas las combinaciones sin suerte. Tengo muchas más formas para dibujar después de esta, así que necesito descubrir cómo comenzar/terminar correctamente una forma antes de reanudar el trabajo. Se agradece cualquier ayuda.

     <script type="text/javascript">
            window.onload = function () {
                var drawingCanvas = document.getElementById('canvas1');

                // Is element in the DOM and does browser support canvas
                if (drawingCanvas && drawingCanvas.getContext) {
                    // Init drawing context
                    var InfieldColor = "#BDB76B";
                    var OutfieldColor = "#F5F5F5";

                    var iGrassLen = Math.min(drawingCanvas.width, drawingCanvas.height) * 0.7;
                    var iRad = iGrassLen * 1.475;
                    var iAng = -60 * Math.PI / 180;
                    var iptInfBez0x = iRad * Math.cos(iAng);
                    var iptInfBez0y = -(iRad * Math.sin(iAng));

                    iAng = -30 * Math.PI / 180;
                    var iptInfBez1x = iRad * Math.cos(iAng);
                    var iptInfBez1y = -(iRad * Math.sin(iAng));
                    var iInfieldLen = (iGrassLen * (88 / 124));

                    var iBaseLen = iInfieldLen / 12;

                    //this is the relative offset between Dixon infield and outfield
                    var iOutfieldLen = iGrassLen * (282 / 124)

                    //bezier control points for outfield circle
                    iRad = iOutfieldLen * 1.31;
                    iAng = -60 * Math.PI / 180;
                    var iptOutBez0x = iRad * Math.cos(iAng);
                    var iptOutBez0y = -(iRad * Math.sin(iAng));

                    iAng = -30 * Math.PI / 180;
                    var iptOutBez1x = iRad * Math.cos(iAng);
                    var iptOutBez1y = -(iRad * Math.sin(iAng));

                    var iHRLen0 = (340 * iInfieldLen / 90) * 1.025;      //iInfieldLen = 90 feet. (plus a fudge factor)
                    var iHRLen1 = (370 * iInfieldLen / 90) * 1.025;
                    var iHRLen2 = (400 * iInfieldLen / 90) * 1.025;

                    var iMoundWid = iInfieldLen / 10;

                    var context = drawingCanvas.getContext('2d');

                    context.fillStyle = "#FFFF00";
                    context.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);

                    context.beginPath;
                    context.moveTo(0, 0);
                    context.lineTo(iGrassLen, 0);
                    context.bezierCurveTo(iptInfBez1x, iptInfBez1y, iptInfBez0x, iptInfBez0y, 0, iGrassLen); // bezier curve
                    context.lineTo(0, 0);
                    context.closePath();
                    context.fillStyle = "blue";
                    context.fill();
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    context.stroke();

                    //infield rectangle
                    context.beginPath;
                    context.rect(0, 0, iInfieldLen - (iBaseLen / 4), iInfieldLen - (iBaseLen / 4));
                    context.closePath;
                    context.fillStyle = "red";
                    context.fill();
                    context.lineWidth = 1;
                    context.strokeStyle = "black";
                    context.stroke();

                }
            }
        </script>

Answer 1

context.beginPath;
...
context.closePath;

Te olvidaste (). Sin eso, estas son solo referencias descartadas a una función, no las llamadas.