html5 - JavaScript Canvas – how to get area used by font -
how area occupied filled ctx.font
? example:
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
Post a Comment