html5キャンバス：重複するパスが正しく塗りつぶされない

Question

HTML5キャンバスで奇妙な問題：別のシェイプの中に1つのシェイプを描画しようとしています。外形は青、内は赤ですが、最終的には両方の図形が赤くなります。コードをステップ実行すれば、青い形が正しく表示されますが、赤い形は青い形の上にレンダリングされます。おそらくBeginPath/EndPathの問題があるかもしれませんが、私は運のないあらゆる組み合わせを試みたようです。私はこの後に描画するためにさらに多くの図形を持っているので、作業を再開する前に図形を正しく開始/終了する方法を理解する必要があります。どんな助けもありがとうございます。

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

あなたは()を忘れてしまいました。それがなければ、関数への参照ではなく、関数への参照だけが破棄されます。