w3resource logo


HTML 5 Canvas

HTML5 Canvas Text

Secondary Nav

Draw Text

In HTML5, canvas element supports basic text rendering on a line-by-line basis. There are two methods fillText() and strokeText() to draw text on canvas. You can use font property (type : string) to specify the number of text setting such as style, weight, size, and font. The style can be normal, italic, or bold. The default style is normal.
Code example of font property :

ctx.font = 'italic 400 12px, sans-serif';

The "400" font-weight doesn't appear because that is the default value.

fillText() Method

The fillText() method is used to render filled text to the canvas by using the current fill style and font.

Syntax :

ctx.fillText(text, x, y, maxWidth)
Parameters Type Description

text

string The text characters to paint on the canvas.
x number The horizontal coordinate to start painting the text, relative to the canvas.
y number The vertical coordinate to start painting the text, relative to the canvas.
maxWidth number The maximum possible text width.

Example : HTML5 Canvas draw text using fillText() Method

The following web document draws text using fillText() method and font property.

Output :

html5 canvas text example1

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
 var ctx = canvas.getContext('2d');
 ctx.font = 'italic 32px sans-serif';
 ctx.fillText('HTML5 Canvas Tutorial', 10, 50); 
}
</script>
</body> 
</html>

Live Demo

strokeText() Method

The strokeText() method is used to render the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.

Syntax :

ctx.strokeText(text, x, y, maxWidth);
Parameters Type Description

text

string The text characters to paint on the canvas.
x number The horizontal coordinate to start painting the text, relative to the canvas.
y number The vertical coordinate to start painting the text, relative to the canvas.
maxWidth number The maximum possible text width.

Example : HTML5 Canvas draw text using strokeText() Method

The following web document draws text using strokeText() method and font, lineWidth properties.

Output :

html5 canvas text example2

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
 var ctx = canvas.getContext('2d');
 ctx.font = "italic 36px Unknown Font, sans-serif";
 ctx.strokeStyle = "red"; // set stroke color to red
 ctx.lineWidth = "1.5";  //  set stroke width to 1.5
  for (var i = 40; i < 200; i += 40) 
     {
     ctx.strokeText("w3resource", i, i);
      }
}
</script>
</body> 
</html>

Live Demo

Example : Draw text using fillText() method and linear gradient

The following web document draws text that is filled with a linear gradient.

Output :

html5 canvas text example3

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
var ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
// Add the colors with fixed stops at 25% of the width.  
  
gradient.addColorStop("0", "red");
gradient.addColorStop(".25", "yellow");
gradient.addColorStop(".50", "green");
gradient.addColorStop(".75", "blue");
gradient.addColorStop("1.0", "magenta");

  // Use the gradient.
ctx.font = "italic 700 25px Unknown Font, sans-serif";
ctx.fillStyle = gradient;

  for (var i = 0; i < 400; i += 50)
   {
      ctx.fillText("W3resource", i, i);
   }
}
</script>
</body> 
</html>

Live Demo

Text Alignment

In HTML5 canvas textAlign property is used to set the text alignment on the canvas. Possible values are start, end, left, right, and center. Default value : start.

  • start : The text is aligned at the normal start of the line (left-aligned for left-to-right locales, right-aligned for right-to-left locales).
  • end : The text is aligned at the normal end of the line (right-aligned for left-to-right locales, left-aligned for right-to-left locales).
  • left : The text is left-aligned.
  • right : The text is right-aligned.
  • center : The text is centered.

Syntax :

ctx.textAlign = value

Example : HTML5 Canvas, draw text using text alignment

The following code example shows all the property values of textAlign property.

Output :

html5 canvas text alignment example

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
var ctx = canvas.getContext('2d');
// Create a line at the anchor point.
ctx.strokeStyle = "blue";
ctx.textAlign = "center";
ctx.moveTo(150, 60);
ctx.lineTo(150, 330);
ctx.stroke();

ctx.strokeStyle = "green";
ctx.font = "20px sans-serif";
ctx.textAlign = "start";
ctx.fillText("Starting position", 150, 100);
ctx.textAlign = "end";
ctx.fillText("End position", 150, 150);
ctx.textAlign = "left";
ctx.fillText("Left alignment", 150, 200);
ctx.textAlign = "center";
ctx.fillText("Center alignment", 150, 250);
ctx.textAlign = "right";
ctx.fillText("Right alignment", 150, 300);
}
</script>
</body> 
</html>

Live Demo

Text Baseline

In HTML5 canvas textBaseline  property is used to get or set the current settings for the font baseline alignment. Legal values are top, hanging, middle, alphabetic, ideographic, bottom.

  • top : The top of the em square.
  • hanging : The hanging baseline
  • middle : The middle of the em square.
  • alphabetic : Default. The alphabetic baseline.
  • ideographic : The ideographic baseline.
  • bottom : The bottom of the em square.

Syntax :

ctx.textBaseline = value

The position of each baseline value, relative to the bounding box, is shown in the following picture :

text baseline

Example : HTML5 Canvas, text baseline example

In the following example the text is vertically centered (textBaseline = 'middle) in the bounding box.

HTML5 canvas text baseline

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="400"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
var ctx = canvas.getContext('2d');
for (i = 0; i < 500; i += 10) 
      {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();
        
      }
         for (i = 0; i <511; i += 10) 
      {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i,canvas.height);
        ctx.stroke();
      }
     ctx.beginPath();
     ctx.moveTo(0, 300);  
  
ctx.font = "80px Unknown Font, sans-serif";  
 var x = canvas.width / 2;
 var y = canvas.height / 2;
 ctx.textAlign = 'center';
 ctx.textBaseline = 'middle';
 ctx.fillStyle = 'blue';
 ctx.fillText('w3resource', x, y); 
}
</script>
</body> 
</html>

Live Demo

Text Metrics

In HTML5 canvas measureText() method is used to get the text metrics of HTML5 Canvas text. The method returns an object that contains the width (in pixels) of the specified text.

Syntax :

var textWidth = ctx.measureText(text)

Example : HTML5 Canvas, text metrics example

The following example returns the width (in pixels) of a given text.

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas - Text</title>
</head>
<body>
<canvas id="DemoCanvas" width="500" height="600"></canvas> 
<script>
var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) 
{
var ctx = canvas.getContext('2d');
var text='w3resource'; 
ctx.font = "24px Unknown Font, sans-serif";  
ctx.fillText(text, 120, 40);
var metrics=ctx.measureText(text);  
alert(metrics.width);   
}
</script>
</body> 
</html>

Live Demo



Join our Question Answer community to learn and share your programming knowledge.