HTML5 Canvas chữ Stroke cho cỡ chữ lớn Không Drawn đúng

Question

Tôi muốn viết một văn bản lớn trên HTML5 canvas với một màu đỏ biên giới (đột quỵ màu) và xanh fill màu.

Tôi cung cấp chiều rộng nét ngang tới 5px.

Điều này thật tuyệt khi tôi đặt font size thành nhỏ hơn 260px.

Đây là mã đầu tiên của tôi http://jsfiddle.net/8Zd7G/:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font="240px Calibri"; 
ctx.strokeStyle = "F00"; //Red 
ctx.fillStyle = "0F0"; //Green 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Nhưng khi tôi đặt font size để lớn hơn hoặc bằng so với 260 px, biên giới text/đột quỵ không màu đúng. Nó chỉ có một đường viền màu đỏ không đầy màu đỏ.

Đây là mã thứ hai của tôi http://jsfiddle.net/Pdr7q/:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font="260px Calibri"; 
ctx.strokeStyle = "F00"; 
ctx.fillStyle = "0F0"; 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Câu hỏi của tôi là làm thế nào để có được stoke văn bản thích hợp điền vào với một kích thước phông chữ lớn (như hình ảnh đầu tiên chứ không phải là thứ hai) ? Cảm ơn trước :)

Answer 1

Đó là một vấn đề đã biết với Chrome, nơi kích thước phông chữ ở trên 256 pixel (incl. mở rộng):
https://code.google.com/p/chromium/issues/detail?id=280221

Hiện tại dường như không có giải pháp cho vấn đề nhưng theo chuỗi (liên kết ở trên) để xem trạng thái sau (cập nhật gần đây nhất là 25 tháng 10).

Bạn có thể giảm sự cố bằng cách giảm độ rộng đường mặc dù vấn đề vẫn sẽ ở đó.

Một tùy chọn khác là vẽ một nửa kích thước (để kích thước < 256) thành một khung tạm thời, sau đó vẽ canvas này vào khung chính với kích thước bạn cần.Nó sẽ làm cho văn bản mờ hơn nhưng nó sẽ trông đẹp hơn phiên bản xoăn mà tôi tin.

Firefox có một lỗi liên quan (không thẳng hàng với kích thước lớn):
https://bugzilla.mozilla.org/show_bug.cgi?id=909873

Answer 2

này đang làm việc

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font = '120pt Calibri'; 
ctx.strokeStyle = "#F00"; 
ctx.fillStyle = "#0F0"; 
ctx.lineWidth = 3; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Working Demo --->jsFiddle

Answer 3

Tôi nghĩ rằng vấn đề có thể liên quan với các font-family bạn đang sử dụng: "Calibri"

Tôi đang dùng Chrome với ubuntu (Chrome 27) và i don T đã Calibri ở đây, nhưng tôi đã thử nghiệm với Arial và điều này đang làm việc tốt (chú ý kích thước phông chữ để 360px, thậm chí lớn hơn của bạn):

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.font = '360px Arial'; 
ctx.strokeStyle = "#F00"; 
ctx.fillStyle = "#0F0"; 
ctx.lineWidth = 5; 
ctx.fillText("Big smile!",0,200); 
ctx.strokeText("Big smile!",0,200); 

Demo:

JSFiddle