javascript - JavaScriptでキャンバスにテキストのアウトラインを作成する

Question

Canvas に描画するときに、JavaScript でテキストにアウトラインを付けるにはどうすればよいですか? 私がやろうとしていることの下の画像を見てください。

Answer 1

ダニエル・ラングは私に解決策を示しました：

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

Answer 2

strokeText を使用してアウトラインをストロークしてみることができます。

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