html5 - JavaScript Canvas – how to get area used by font -


how area occupied filled ctx.font? example:

enter image description here

all research points baseline , ctx.measuretext(word); gives me width (perfectly, should add) height i'm struggling with, descenders seem included in calculation.

can bitmap font , calculate scale way?

here (failing) canvas size function using:

function textsize(word, size){   var div = document.createelement("div");   div.innerhtml = word;   div.style.position = 'absolute';   div.style.fontfamily = 'serif';   div.style.fontweight = 'normal';   div.style.fontsize = size + 'px';   document.body.appendchild(div);   var size = {     'width': div.offsetwidth,     'height': div.offsetheight   };   return size; // size.height larger required fonts no descenders } 

try :

context.filltext("hello world!", 10, 100); context.stroketext("hello world!", 10, 100); var textmetrics = context.measuretext("hello world!"); var width = textmetrics.width;  context.font = "20pt arial"; context.filltext("width of previous text: " + width + "pixels", 10, 150); 

Comments

Popular posts from this blog

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -