context2d.strokeText（）は、FF3.6/4の下のパスをストロークします。

Question

私はChromeまたはSafariで再現しないFF（3.6および4beta4）の下でstrokeTextで奇妙な結果に直面しています。 塗りつぶされたパスシェイプ（ストロークされていない）、ストロークされたテキストを描画すると、strokeText（）が呼び出されたときにパスがストロークされます。ここで

は私のコードです：

  var el = document.getElementById('canvas'), 
      ctx = el.getContext('2d'); 

     ctx.save(); 
     // draw Rect 
     ctx.beginPath(); 
     ctx.moveTo(100, 100); 
     ctx.lineTo(200, 100); 
     ctx.lineTo(200, 200); 
     ctx.lineTo(100, 200); 
     ctx.lineTo(100, 100); 
     ctx.closePath(); 
     ctx.fillStyle = 'red'; 
     ctx.fill(); 

        // draw Text 
     ctx.save();   
     ctx.textAlign = 'start'; 
     ctx.fillStyle = "rgba(0,0,0,0.0)"; 
     ctx.strokeStyle = "blue"; 
     ctx.lineWidth = 2; 
     ctx.font = "bold 35pt sans-serif"; 
     ctx.strokeText("Hello World !", 100, 280); 

     ctx.restore(); 

あなたがそれを実行した場合、それはいけない一方で、RECTは、青色でストロークされています。

このコードに何か問題があるか、それともFFのバグですか？

ありがとうございます！

Answer 1

この方法でrectを描画するのはどうですか？

var el = document.getElementById('canvas'), 
ctx = el.getContext('2d'); 

ctx.save(); 
// draw Rect 
ctx.fillStyle = 'red'; 
ctx.fillRect (100, 100, 100, 100); // <=== 
// draw Text 
ctx.save();   
ctx.textAlign = 'start'; 
ctx.fillStyle = "rgba(0,0,0,0.0)"; 
ctx.strokeStyle = "blue"; 
ctx.lineWidth = 2; 
ctx.font = "bold 35pt sans-serif"; 
ctx.strokeText("Hello World !", 100, 280); 

ctx.restore(); 

strokeText問題について以下EDIT、あなたがパスを描画し、充填する前にテキストを描画する場合は

var el = document.getElementById('canvas'), 
ctx = el.getContext('2d'); 

// draw Text -> at first 
ctx.save();   
ctx.textAlign = 'start'; 
ctx.fillStyle = "rgba(0,0,0,0.0)"; 
ctx.strokeStyle = "blue"; 
ctx.lineWidth = 2; 
ctx.font = "bold 35pt sans-serif"; 
ctx.strokeText("Hello World !", 100, 280); 

ctx.save(); 
// draw Rect 
ctx.beginPath(); 
ctx.moveTo(100, 100); 
ctx.lineTo(200, 100); 
ctx.lineTo(200, 200); 
ctx.lineTo(100, 200); 
ctx.lineTo(100, 100); 
ctx.closePath(); 
ctx.fillStyle = 'red'; 
ctx.fill(); 

ctx.restore(); 

Answer 2

それを修正するそれはちょうどFirefoxの4ベータ版8（で修正されているようですテスト済み...）。 関連するバグは、https://bugzilla.mozilla.org/show_bug.cgi?id=499628