Join the Mozilla’s Test Days event from 9–15 Jan to test the new Firefox address bar on Firefox Beta 135 and get a chance to win Mozilla swag vouchers! 🎁

Avatar for Username

Mozilla サポートの検索

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.

詳しく学ぶ

このスレッドはアーカイブに保管されました。 必要であれば新たに質問してください。

HTML Canvas measure text width difference

  • 1 件の返信
  • 1 人がこの問題に困っています
  • 10 回表示
  • 最後の返信者: 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>

この投稿は cor-el により に変更されました

すべての返信 (1)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Maybe ask advice at a web development oriented forum.