Windows 10 will reach EOS (end of support) on October 14, 2025. For more information, see this article.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Le thread ibilondoloziwe. Nceda ubuze umbuzo omtsha ukuba ufuna uncedo.

HTML Canvas measure text width difference

  • 1 phendula
  • 1 inayo le ngxaki
  • 5 views
  • Impendulo yokugqibela ngu cor-el

dskesavan
dskesavan
more options

HTML Canvas measure text width value is different from other browsers for Courier New font family.

Please find the width value comparison of the browsers. Google Chrome width: 19.203125 Firefox width: 20 Internet Explorer: 19 Edge: 19.203125

Sample Code: 

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "8px courier new";
var txt = "Code"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);
</script>
</body>
</html>
HTML Canvas measure text width value is different from other browsers for Courier New font family. Please find the width value comparison of the browsers. Google Chrome width: 19.203125 Firefox width: 20 Internet Explorer: 19 Edge: 19.203125 Sample Code: <pre><nowiki><!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "8px courier new"; var txt = "Code" ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50); ctx.fillText(txt, 10, 100); </script> </body> </html></nowiki></pre>

Ilungisiwe ngu cor-el

All Replies (1)

cor-el
cor-el
  • Moderator
more options

Maybe ask advice at a web development oriented forum.