Text

To draw text(s) on canvas

  • turned_in_notText Related Methods & Properties
    • strokeText()
    • fillText()
    • measureText()
    • font
    • textAlign
    • textBaseline


strokeText( )

Used to draw stroke text(s) on canvas, default stroke color is black

Syntax

ctx.strokeText(text, x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font="25px arial";
ctx.strokeText("Hello world",50,50);
strokeRectsubject
strokeRectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.font="25px arial";
  ctx.strokeText("Hello world",50,50);
</script>
</body>
</html>


fillText( )

Used to draw filled text(s) on canvas, default fill color is black

Syntax

ctx.fillText(text, x, y)
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle="red";  /* Used to fill the color */
ctx.font="25px arial";
ctx.fillText("Hello world",50,50);
fillRectsubject
fillRectclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle="red";
  ctx.font="25px arial";
  ctx.fillText("Hello world",50,50);
</script>
</body>
</html>


measureText( )

Used to get/measure the width of any text in pixels

Syntax

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

var width=ctx.measureText("Hello").width;
ctx.fillText("Text width : "+width+"px",50,50);
measureTextsubject
measureTextclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var width=ctx.measureText("Hello").width;
  ctx.fillText("Text width : "+width+"px",50,50);
</script>
</body>
</html>


font

Used to set or get the text font properties (similar to css font properties), default font property is '10px sans-serif'

Syntax -To set font properties

ctx.font=style variant weight size family

Syntax -To get font properties

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

ctx.font="35px chiller";
ctx.strokeText("Hello !",50,50);
fontsubject
fontclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.font="35px chiller";
  ctx.strokeText("Hello !",50,50);
</script>
</body>
</html>


textAlign

Used to set or get the text alignment (similar to css text-align property), default value is 'start'

Syntax -To set textAlign

ctx.textAlign="start|end|center|left|right"

Syntax -To get textAlign

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

ctx.strokeStyle="red";
ctx.moveTo(100,5);ctx.lineTo(100,125);ctx.stroke();
ctx.font="15px Arial";
ctx.textAlign="start";ctx.fillText("Start",100,20);
ctx.textAlign="end";ctx.fillText("End",100,45);
ctx.textAlign="center";ctx.fillText("Center",100,70);
ctx.textAlign="left";ctx.fillText("Left",100,95);
ctx.textAlign="right";ctx.fillText("Right",100,120);
textAlignsubject
textAlignclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.font="35px chiller";
  ctx.strokeText("Hello !",50,50);
</script>
</body>
</html>


textBaseline

Used to set or get the text baseline (similar to css vertical-align property), default value is 'alphabetic'

Syntax -To set textBaseline

ctx.textBaseline="alphabetic|top|bottom|middle|hanging|ideographic"

Syntax -To get textBaseline

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

ctx.strokeStyle="red";
ctx.moveTo(20,50);ctx.lineTo(280,50);ctx.stroke();
ctx.font="15px Arial"
ctx.textBaseline="alphabetic";ctx.fillText("Alphabetic",20,50);
ctx.textBaseline="top";ctx.fillText("Top",90,50);
ctx.textBaseline="bottom";ctx.fillText("Bottom",120,50);
ctx.textBaseline="middle";ctx.fillText("Middle",170,50);
ctx.textBaseline="hanging";ctx.fillText("Hanging",220,50);
ctx.textBaseline="ideographic";ctx.fillText("Ideographic",240,50);
textBaselinesubject
textBaselineclose
<!DOCTYPE html>
<html>
<head>
<title>Full Code</title>
</head>
<body>
  <canvas id="canvas" width="200" height="100" style="border:1px solid teal;"></canvas>
<script>
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.moveTo(20,50);
  ctx.lineTo(280,50);
  ctx.stroke();
  ctx.font="15px Arial"
  ctx.fillStyle="red";
  ctx.textBaseline="alphabetic";
  ctx.fillText("Alphabetic",160,50);
</script>
</body>
</html>


  • Image
❮ Prev Ellipse
Next ❯Image
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯