Question

How get the width of the drawn text on the canvas in JavaScript

Answer 1

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = ctx.measureText("PHP"); 
document.write(text.width); 

/*
run:  
    
21
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals

Answer 2

<canvas id="canvas"></canvas>

<script type="text/JavaScript">   

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "32px serif";
var text = ctx.measureText("PHP"); 
document.write(text.width); 

/*
run:  
    
 58.71666717529297 
   
*/
  
</script>

 

70+ SQL courses for beginners and professionals