Checking width of string in html canvas -

hello i've tried relentlessly write script check width of string , if greater amount, lower font size , draw again. except not working. once draw text, never updates correct font size. stays , never gets smaller throwing script endless loop. here code:

var nfontsize = 25;  var draw_name = function(text) {     var c=document.getelementbyid("badgecanvas");     var ctx=c.getcontext("2d");     ctx.font="nfontsize opensansbold";     ctx.fillstyle = "#000000";     ctx.filltext(text,80,25);     var metrics = ctx.measuretext(text);     var width = metrics.width;      while (width > 200) {         nfontsize--;         ctx.font="nfontsize opensansbold";         ctx.filltext(text,80,25);         metrics = ctx.measuretext(text);         width = metrics.width;     }      ctx.font="nfontsize opensansbold";     ctx.fillstyle = "#000000";     ctx.filltext(text,80,25); 

"nfontsize opensansbold" not valid font. try

ctx.font= nfontsize + "px opensansbold"; 

also, don't have render measure text remove ctx.filltext(text,80,25); before while loop , inside while loop. otherwise, ugly.

var nfontsize = 25;  var draw_name = function(text) {     var c=document.getelementbyid("badgecanvas");     var ctx=c.getcontext("2d");     ctx.font= nfontsize + "px opensansbold";     ctx.fillstyle = "#000000";      var metrics = ctx.measuretext(text);     var width = metrics.width;      while (width > 200) {         nfontsize--;         ctx.font= nfontsize + "px opensansbold";          metrics = ctx.measuretext(text);         width = metrics.width;     }      ctx.font= nfontsize + "px opensansbold";     ctx.fillstyle = "#000000";     ctx.filltext(text,80,25);