search

ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 752 forks source link

Text shape with align:'center' and custom font misaligned #956

Open nmehlei opened 10 years ago

nmehlei commented 10 years ago

Aligning text at the horizontal center of a text shape does not seem to be correctly working when using a custom font.

kineticjstextalign

The upper text is "Arial", which perfectly aligns in the middle. The lower text is Adobe's SourceCode Pro, which is off by more than a dozen pixels. Wild guess, but it may be connected to the fact that SourceCode Pro is a fixed-width font, which may throw some calculation off (?).

nmehlei commented 10 years ago

It seems like it can be avoided with a library like https://github.com/JenniferSimonds/FontDetect, which can be used to delay the start of all graphical activities until all fonts are loaded, albeit in a sort of hacky style ;) would be awesome if kinetic could rerender automatically as soon as the font is available (like with css fonts) or at least warn if the font wasn't found during draw execution.