Fractional font sizes for HTML5 Canvas?

JavascriptWeb DevelopmentFront End Scripts

For fractional font sizes, during initialization render the text at the standard font size. After that measure the line length,

Use a hidden canvas to render the text onto and then use drawImage to the main canvas with a multiplier on the width.

ctx.font = (font_size * zoom) + "px Georgia";
ctx.fillText(mytext,0, 0);

var s = (iniLineLength * zoom) / ctx.measureText(mytext) ;
mainContext.drawImage(tmpCanvas,x, y, pw * s, ph);
Published on 06-Apr-2018 13:43:47