Different font widths in html5-canvas

Question

i have a pretty simple but very annoying problem. I try to read the width of a string in a canvas. I know how to do this, and it works. But the results differ from browser to browser.

ctx.font = "10px Arial";
var txt = "This is a text demonstration. Why is the width of this text different in every browser??";
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);

Here a little fiddle: http://jsfiddle.net/83v7c4jv/

Chrome: 390px, IE: 375px, Firefox: 394px. Only IE is accurate, since C# gives me the same result if i try this there. Does anybody know why and how i can get Chrome and Firefox to render and calculate the same values like IE?

score 0 · Answer 1 · edited May 23 '17 at 11:44

you need to read this answer

it worked for me in some project , i used this code to get height of the text because it not exist it will work the same as text width

obj.lineHeight = function(){


                var testDiv = document.createElement('div'); // creating div to measure text in 
                    testDiv.style.padding= "0px";
                    testDiv.style.margin = "0px";
                    testDiv.style.backgroundColor = "white";
                    testDiv.textContent = "Hello World !";
                    testDiv.style.fontSize = obj.size+"px";
                    testDiv.style.fontFamily = obj.fontFamily;
                    testDiv.style.clear = "both";
                    testDiv.style.visibility="hidden";
                    document.body.appendChild(testDiv);
                    var __height__ =  testDiv.clientHeight;
                    testDiv.style.display = "none";
                    document.body.removeChild(testDiv);

                    return __height__ ;

            };

The Autor needs to know how to make Firefox and chrome render Text in canvas with the correct size. Getting the size oft a domNode is not helpful — Neutrosider, Feb 26 '15 at 11:45
OK, but how dies one make the Different Browsers render the Text identically? — Neutrosider, Feb 26 '15 at 11:53

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

First of all, the same font may be rendered different in different browsers. Pay attention on the following picture. I just putted together screenshots of your JSFIDDLE running on Chrome (the first) and IE (the second). As you can see, the text width actually is not the same, and the numbers that ctx.measureText returns are correct in the both cases.

enter image description here

C# gives you the same number as IE because they use the same text rendering algorithm, but it has no meaning when your page runs on other browser.

You can found some tricks and hacks in this thread, but in fact you cannot really control the browser rendering mechanism. If you want to ensure your text to be shown exactly the same on all the browsers and only way is to turn it into an image.

edited May 23 '17 at 11:50

Community

1
1

answered Feb 26 '15 at 11:50

Alexander Dayan

2,846
1
17
30

Yes, i know the width's are not the real problem. MeasureText returns the real visible value, still the result is wrong. If i try to create a big image with text inside, it will be different in every browser, even though its the same code. Is there no way to force Chrome and Firefox to display this text like IE does? I cant create images with text since my code renders text dynamicaly. – OliverK Feb 26 '15 at 12:12
No, it's no way to force Chrome and Firefox to display like IE. However, you can create image with text dynamically on ASP.NET server. Do you want me to explain how? If so, I can insert it to my answer – Alexander Dayan Feb 26 '15 at 13:33
Thanks, i know how to do that but thats not an option ;). It must be clientside whole way. – OliverK Feb 26 '15 at 14:04
You can try to find a font (in fact, font face + size + weight) for which the difference between browsers is minimal. Good luck :) BTW, if you think my answer was helpful you can vote it. – Alexander Dayan Feb 26 '15 at 14:10

Different font widths in html5-canvas

2 Answers2