[Canvas] Stroke um Text nicht auf den Rand

[baeri]

Hallo Liebe Leut,

ich häng mal wieder an nen "kleinen" Problem:
http://jsfiddle.net/ho126txx/

Hier habe ich einen Textrand erstellt... hier sieht man, der Text ist genau auf dem Rand des Textes...
Wie kann ich den Rand "Außenrum" machen?

Klar ich könnte auch die richtige Farbe dahinterlegen oder ausschneiden (müsste auch gehen), allerdings kann ich dann nicht "vorher" was dahinter Platzieren <- was ich eben möchte...

Meine letzte Lösung wäre direkt dahinter ein weiteres Canvas zu legen (aber das ist mir zu viel "Pfusch")

hat jemand eine gute Idee für mich?
=> vom Prinzip soll der Rand so erscheinen wie beim unteren "Test" <- nur eben ohne Inhalt.

Danke

 

[Sempervivum]

Warum definierst Du denn strokeStyle jeweils zweimal? Die zweite Definition überschreibt doch die erste?
Wahrscheinlich willst du, dass der Text den Hintergrund durchscheinen lässt, sonst könntest Du ihn einfach in der Hintergrundfarbe zeichnen lassen.
Eine etwas aufwändige Lösung wäre, eine Füllfarbe für den Text zu wählen, die sonst nirgends auftritt, dann alle Pixel abzuarbeiten und auf transparent setzen, wenn die Füllfarbe gefunden wird:
http://stackoverflow.com/questions/...-another-in-an-image-sprite-in-a-html5-canvas
http://jsfiddle.net/Sempervivum/ho126txx/2/
Mist, dabei geht das Antialiasing kaputt.

 

[baeri]

strokeStyle wurde deshalb zweimal definiert, weil man die "echte" Farbe nicht wirklich sieht...

vom Prinzip wollte ich eine art Tiefen effekt machen... dazu soll in Hintergrund die schrift leicht versetzt mit schatten sein, der Rand selbst soll mit dem "echten" Hindergrund verschmelzen (sozusagen wird also dieser gelöscht und an dieser stelle entsteht eine Tranzparenz).

http://jsfiddle.net/ho126txx/3/
vom Prinzip geht hier das >obere Test< schon in die richtige Richtung... allerdings schneidet der Rote Rand zu eng in den Text (die Schrift wird zu dünn). Darüber soll jetzt am ende nochmal ein "dicker" Rand gelegt werden der dann mit den Hintergrund verchmilzt > also so, dass sozusagen das "hellgraue" vertieft wirkt. Den Dicken rand will ich dann löschen (dann bin ich beim Hintergrund flexibler).

bei deinem Beispiel erscheint das ganze ja nicht transparent:
http://jsfiddle.net/ho126txx/5/

hier ist das Problem, das dinge die ich davor gemacht habe, wieder gelöscht werden! Und genau das will ich ja verhindern....

edit:
hier sind wir schon nahe an dem was ich will:
http://jsfiddle.net/ho126txx/8/

oben sieht man schön wohin ich will...
allerdings, je dicker die Linie:
ctxt.lineWidth = 8;
desto "zugeschwollener" der Text!
Gleichzeitig ist die Dicke aber Notwendig um die "erwünschte" Tiefe zu erreichen. (evtl. habe ich auch hier einen Falschen ansatz!?)

Unten ist genau das selbe, nur der Rahmen rot markiert und das "löschen" weggelassen (zur verdeutlichung)

 

[Sempervivum]

Stimmt, das obere sieht schon sehr gut aus. Jetzt erkennt man auch, was für einen Effekt Du erreichen wolltest. Mich interessiert zwar das Thema, aber ich sehe, dass Du schon bessere Kenntnisse mit Canvas hast als ich. Vielleicht meldet sich noch jemand, der eingehendere Kenntnisse hat und dir weiter helfen kann.