context2d.strokeText() streicht den Pfad unter FF3.6/4

Question

Ich habe einen seltsamen Effekt mit strokeText unter FF (3.6 und 4beta4), die ich nicht unter Chrome oder Safari reproduzieren. Wenn ich eine gefüllte Pfadform (aber nicht gestri- chelt) und dann einen strichenen Text zeichne, wird der Pfad gestri- chen, wenn strokeText() aufgerufen wird.

Hier ist mein Code:

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

Wenn Sie es ausführen, das rect in blau gestrichen wird, während es nicht sollte.

Siehst du etwas falsch mit diesem Code, oder ist es ein Fehler in FF?

Danke!

Answer 1

Was ist mit dem Zeichnen der Rect auf diese Weise?

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

EDIT unten über strokeText Problem, so scheint es, dass, wenn Sie den Text ziehen vor dem Zeichnen und Füllen der Weg es behebt

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

Es in Firefox 4 Beta 8 wurde behoben (nur geprüft...). Ich denke, der zugehörige Fehler ist: https://bugzilla.mozilla.org/show_bug.cgi?id=499628