Disegno di testo con tratto esterno con tela HTML5

Question

Attualmente sto utilizzando la tela di HTML5 per eseguire il rendering di un numero di stringhe utilizzando il metodo fillText. Funziona bene, ma mi piacerebbe anche dare a ogni stringa un tratto esterno nero 1px. Sfortunatamente la funzione strokeText sembra applicare un tratto interno. Per contrastare questo, ho scritto una funzione drawStrokedText che raggiunge l'effetto che sto cercando. Sfortunatamente è orribile lento (per ovvi motivi).

Esiste un modo rapido e cross-browser per ottenere un tratto esterno di 1 pixel utilizzando la funzionalità tela nativa?

drawStrokedText = function(context, text, x, y) 
{ 
    context.fillStyle = "rgb(0,0,0)"; 
    context.fillText(text, x-1, y-1); 
    context.fillText(text, x+1, y-1); 
    context.fillText(text, x-1, y); 
    context.fillText(text, x+1, y); 
    context.fillText(text, x-1, y+1); 
    context.fillText(text, x+1, y+1); 

    context.fillStyle = "rgb(255,255,255)"; 
    context.fillText(text, x, y); 
}; 

Ecco un esempio degli effetti sul lavoro:

Answer 1

Cosa c'è di sbagliato con il colpo? Poiché metà del tratto sarà al di fuori della forma, puoi sempre disegnare il tratto per primo con una larghezza della linea del doppio di ciò che desideri. Quindi, se si voleva un colpo esterno 4px si potrebbe fare:

function drawStroked(text, x, y) { 
    ctx.font = "80px Sans-serif" 
    ctx.strokeStyle = 'black'; 
    ctx.lineWidth = 8; 
    ctx.strokeText(text, x, y); 
    ctx.fillStyle = 'white'; 
    ctx.fillText(text, x, y); 
} 


drawStroked("37°", 50, 150); 

Il che rende:

violino dal vivo qui: http://jsfiddle.net/vNWn6/

---

se ciò accade di non guardare come accurato su scale di rendering di testo più piccole, puoi sempre disegnarlo in grande ma ridimensionarlo (nel caso precedente dovresti fare ctx.scale(0.25, 0.25))

Answer 2

risposta di Simon è una buona soluzione, ma può avere difetti mitering in alcuni casi, soprattutto con capitale 'M', 'V', & 'W':

drawStroked("MVW", 50, 150); 

http://jsfiddle.net/hwG42/1/

In questo caso, è meglio utilizzare:

ctx.miterLimit=2; 

http://jsfiddle.net/hwG42/3/

Buona fortuna!

Answer 3

Per un'ombra liscia si può provare questo

ctx.beginPath(); 
ctx.fillStyle = 'white'; 
ctx.font = "bold 9pt Tahoma"; 
ctx.shadowBlur = 3; 
ctx.textAlign = "center"; 
ctx.shadowColor = "#000000"; 
ctx.shadowOffs = 0;     
ctx.fillText('www.ifnotpics.com', 100, 50);   
ctx.closePath();