CODEWITHSUNDEEP
htmlanimationcanvasmargins
Kaizokupuffball
Kaizokupuffball

Reputation: 2833

HTML5 canvas fillText margins

Is there any way of adding some kind of automatic margin between two or more fillText()?

I have a set of fillText() that is changing every frame, they become longer and shorter, but I would want them to to have a fixed space between the text. I don't know how else I can explain this. I created a fiddle to show what I mean.

Example, if you look at the seconds counter, when there is only 1 character in there, the 'S' character is longer away from the seconds than it should.

How would I fix this? I'm pretty new to canvas. Thanks in advance.

Upvotes: 2

Views: 1018

Answers (1)

Kaizokupuffball
Kaizokupuffball

Reputation: 2833

Okay, so I found a solution. I'm now grabbing the width of each text element and using that, plus some more in the second argument of fillText().

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

^ Updated solution. It's a bit messy atm., will try to clean it up abit later.

Upvotes: 1

Related Questions