context2d.strokeText() strokes the path under FF3.6/4
I am facing a strange effect with strokeText under FF (3.6 and 4beta4) that I don't reproduce under Chrome or Safari. If I draw a filled path shape (but not stroked), and then a stroked text, the path is stroked when strokeText() is called.
Here is my 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();
If you run it, the rect is 开发者_Python百科stroked in blue, while it should not.
Do you see something wrong with this code, or is it a bug in FF ?
Thanks !
It has been fixed in Firefox 4 beta 8. (just tested...). I think the related bug is : https://bugzilla.mozilla.org/show_bug.cgi?id=499628
What about drawing the rect in this way?
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 below about strokeText problem, it seems that if you draw the text before drawing and filling the path fixes it
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();
精彩评论