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);
Updated on 28-Jan-2020 07:09:47