Prev Demo
Textmetrices
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>TextMetrices</title> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = canvas.width / 2; var y = canvas.height / 2 - 10; var text = 'TECHFUNDA'; context.font = '20pt Calibri'; context.textAlign = 'left'; context.fillStyle = 'orange'; context.fillText(text, x, y); var metrics = context.measureText(text); var width = metrics.width; context.font = '15pt Calibri'; context.textAlign = 'right'; context.fillStyle = 'green'; context.fillText('(' + width + 'px wide)', x, y + 40); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
