einen äußeren Schlag auf Leinwand Text erstellen, ohne einen inneren Schlaganfall

Question

ich die Möglichkeit gesehen habe, einfach durch eine Verdoppelung des Hubs (und die Änderung der Reihenfolge) beim Schreiben von Text auf Leinwand (see here)

jedoch einen äußeren Schlag zu simulieren , die App, an der ich arbeite, erlaubt die Verwendung von RGBA-Farben. Dadurch ist es möglich, dass der "versteckte" innere Strich sichtbar wird. Hier ein Beispiel:

In diesem Beispiel ist der Strich weiß und die Textfüllung ist rgba (0,0,0,0,5).

Als Ergebnis kann der versteckte weiße innere Strich gesehen werden. Ist es möglich, einen äußeren Schlag ohne das innere anzuwenden? Wenn nicht, ist es möglich, etwas wie eine Schnittmaske auf den Strich anzuwenden, um zu verhindern, dass das Innere sichtbar wird, wenn die Textfüllung Deckkraft hat?

Ich fühle mich wie ich die Antwort hier wissen, aber hoffe, jemand könnte eine clevere Lösung haben.

Dank -

Answer 1

Durch eine einfache Abfolge von Zusammensetzung Betrieb verwenden Sie das Ergebnis durch diese Schritte erhalten:

• Stroke den Text mit Zielfarbe destination-out
für Schlaganfall
• ändern Zusammensetzung Modus
• Füllen Sie mit einer beliebigen Farbe. Dies wird das Innere zerstören.
• ändern Zusammensetzung Modus source-over
• Fill erneut Ziel mit Farbe und alpha

Wenn Sie den Hintergrund sehen, müssen durch Sie diese Schritte auf einem versteckten (Off-Screen) Leinwand zu tun, dann zurück ziehen das Ergebnis über dem Hintergrund.

var ctx = c.getContext("2d"); 
 
ctx.font = "128px sans-serif"; 
 
ctx.textBaseline = "top"; 
 
ctx.lineJoin = "round"; 
 
ctx.strokeStyle = "#fff"; 
 
ctx.lineWidth = 11; 
 

 
ctx.strokeText("MY TEXT", 10, 10);     // stroke 
 
ctx.globalCompositeOperation = "destination-out"; // will delete what's under 
 
ctx.fillText("MY TEXT", 10, 10);     // on next draw 
 
ctx.globalCompositeOperation = "source-over";  // normal comp. mode 
 
ctx.fillStyle = "rgba(0,0,0,0.5)";     // draw in target fill/color 
 
ctx.fillText("MY TEXT", 10, 10);

#c {background:rgb(55, 68, 236)}

<canvas id=c width=580></canvas>