HTML5-Leinwand fillText Ränder

Question

Gibt es eine Möglichkeit, eine Art von automatischen Rand zwischen zwei oder mehr fillText() hinzuzufügen?

Ich habe eine Reihe von fillText(), die jeden Rahmen verändert sich, sie werden länger und kürzer, aber ich würde sie haben einen festen Platz zwischen den Text. Ich weiß nicht, wie ich das sonst noch erklären kann. Ich habe eine fiddle erstellt, um zu zeigen, was ich meine.

Wenn Sie beispielsweise den Sekundenzähler betrachten, wenn nur 1 Zeichen vorhanden ist, ist das Zeichen "S" länger von den Sekunden entfernt, als es sein sollte.

Wie würde ich das beheben? Ich bin ziemlich neu auf Leinwand. Danke im Voraus.

Answer 1

Okay, also habe ich eine Lösung gefunden. Ich nehme jetzt die Breite jedes Textelements und benutze das plus ein paar mehr im zweiten Argument von fillText().

https://jsfiddle.net/9tv44ja5/3/

^Aktualisierte Lösung. Es ist ein bisschen unordentlich atm., Wird versuchen, es später abzuräumen.