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

Wo archive tread sia. Meɖekuku bia biabia yeye ne ehia kpeɖeŋu.

HTML Canvas measure text width difference

  • 1 ŋuɖoɖo
  • 1 masɔmasɔ sia le esi
  • 10 views
  • Nuɖoɖo mlɔetɔ 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 trɔe

All Replies (1)

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

Maybe ask advice at a web development oriented forum.