measureText() Method - Javascript Canvas Reference

Javascript examples for Canvas Reference:measureText


The measureText() method measures the width of the text in pixels.

JavaScript syntax


Parameter Values

Parameter Description
text The text to be measured


Check the width of the text, before writing it on the canvas:

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>

<canvas id="myCanvas" width="300" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>


var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
var txt = "Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);//  w  w  w  .ja va2



Related Tutorials