Créer un contour de texte sur une toile en javascript

Question

Comment puis-je donner un contour à un texte en JavaScript lorsque je dessine sur le Canevas? Voir l'image ci-dessous de ce que j'essaie de faire.

Answer 1

Vous pouvez essayer d'utiliser strokeText pour caresser les grandes lignes:

var context = document.getElementById("d").getContext("2d"); 

context.font = "bold 34px sans-serif"; 
context.fillText('office space', 50, 60); 
context.strokeStyle = 'white'; 
context.lineWidth = 2; 
context.strokeText('office space', 50, 60); 

Answer 2

Daniel Langh m'a montré la solution:

var txt = 'Hello World!'; 
var x = 30, 
    y = 50; 

context.font = "40px Helvetica"; 

context.strokeStyle = 'white'; 

// setup these to match your needs 
context.miterLimit = 2; 
context.lineJoin = 'circle'; 

// draw an outline, then filled 
context.lineWidth = 7; 
context.strokeText(txt, x, y); 
context.lineWidth = 1; 
context.fillText(txt, x, y);