Computer >> Computer tutorials >  >> Programming >> Javascript

Fractional font sizes for HTML5 Canvas?


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);