Checking width of string in html canvas

Question

Hello all I've tried relentlessly to write a script that will check the width of a string and if it is greater than a certain amount, lower the font size and draw it again. Except this is not working. Once I initially draw the text, it never updates to the correct font size. It just stays what it was originally and never gets any smaller throwing the script into an endless loop. Here is my 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);

Ceres · Accepted Answer · 2013-05-21 19:52:45Z

1

"nFontSize OpenSansBold" is not a valid font. Try

ctx.font= nFontSize + "px OpenSansBold";

Also, you don't have to render it to measure the text so remove the ctx.fillText(text,80,25); before your while loop and inside your while loop. Otherwise, it will look 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);

answered May 21, 2013 at 19:52

Ceres

3,6883 gold badges20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Twisterz Over a year ago

It's a font I imported in the css, would this answer still apply?

Ceres Over a year ago

Sorry, it's not the font, it's the string you are using to set the ctx.font property. "nFontsize OpenSansBold" is a string.

Collectives™ on Stack Overflow

Checking width of string in html canvas

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related