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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

HTML Canvas measure text width difference

  • 1 antwoord
  • 1 het hierdie probleem
  • 10 views
  • Laaste antwoord deur 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>

Gewysig op deur cor-el

All Replies (1)

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

Maybe ask advice at a web development oriented forum.