HTML Canvas measure text width difference
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>
Modified by cor-el
All Replies (1)
Maybe ask advice at a web development oriented forum.