Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML5 canvas ctx.fillText won\'t do line breaks
The fillText() method in HTML5 Canvas draws filled text but does not automatically handle line breaks. When you include newline characters (fillText() multiple times for each line.
Syntax
Following is the syntax for the fillText() method −
context.fillText(text, x, y, maxWidth);
To create line breaks, split the text and draw each line separately −
var lines = text.split('
');
for (var i = 0; i
Why fillText() Ignores Line Breaks
The Canvas API treats text as a continuous string and renders it as such. Unlike HTML elements where
<br> tags create line breaks, Canvas fillText() interprets newline characters as regular whitespace. This behavior is consistent across all browsers and is part of the Canvas specification.
Manual Line Breaking Method
The most common approach is to split the text at newline characters and render each line at an incremented Y position.
Example
Following example demonstrates how to create line breaks by splitting text and using multiple fillText() calls −
<!DOCTYPE html>
<html>
<head>
<title>Canvas Line Breaks</title>
<style>
canvas {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Canvas Text with Line Breaks</h2>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = '16px Arial';
ctx.fillStyle = 'black';
var text = 'First line of text\nSecond line of text\nThird line of text';
var x = 20;
var y = 40;
var lineHeight = 25;
var lines = text.split('
');
for (var i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], x, y + (i * lineHeight));
}
</script>
</body>
</html>
The output shows three separate lines of text properly spaced −
First line of text
Second line of text
Third line of text
Function for Multi-line Text
For reusability, you can create a function that handles multi-line text rendering automatically.
Example
Following example creates a reusable function for drawing multi-line text −
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Text Function</title>
<style>
canvas {
background-color: #fff8dc;
border: 2px solid #8b4513;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Reusable Multi-line Text Function</h2>
<canvas id="textCanvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('textCanvas');
var ctx = canvas.getContext('2d');
function drawMultilineText(context, text, x, y, lineHeight) {
var lines = text.split('
');
for (var i = 0; i < lines.length; i++) {
context.fillText(lines[i], x, y + (i * lineHeight));
}
}
ctx.font = '18px Courier';
ctx.fillStyle = '#2c3e50';
var multilineText = 'Welcome to TutorialsPoint\nHTML5 Canvas Tutorial
\nLearn how to:
? Draw shapes
? Add text
? Handle events';
drawMultilineText(ctx, multilineText, 30, 40, 24);
</script>
</body>
</html>
The function renders multiple lines with consistent spacing, including empty lines for formatting −
Welcome to TutorialsPoint
HTML5 Canvas Tutorial
Learn how to:
? Draw shapes
? Add text
? Handle events
Word Wrapping for Long Text
For text that exceeds the canvas width, you can implement word wrapping by measuring text width and breaking at word boundaries.
Example
Following example demonstrates automatic word wrapping for long text −
<!DOCTYPE html>
<html>
<head>
<title>Canvas Word Wrapping</title>
<style>
canvas {
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Word Wrapping Example</h2>
<canvas id="wrapCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById('wrapCanvas');
var ctx = canvas.getContext('2d');
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
}
ctx.font = '14px Arial';
ctx.fillStyle = '#333';
var longText = 'This is a very long text that will be automatically wrapped to fit within the specified width of the canvas element.';
wrapText(ctx, longText, 10, 30, 280, 20);
</script>
</body>
</html>
The text automatically wraps at word boundaries when it exceeds the specified maximum width −
This is a very long text that will be
automatically wrapped to fit within the
specified width of the canvas element.
Comparison of Line Breaking Methods
| Method | Use Case | Advantages | Disadvantages |
|---|---|---|---|
| Manual line splitting | Predetermined line breaks with |
Simple, fast, full control | Doesn't handle dynamic width changes |
| Word wrapping | Long text that needs to fit within bounds | Handles any text length, respects word boundaries | More complex, requires width calculations |
| Hybrid approach | Text with both breaks and long lines |
Handles manual breaks + automatic wrapping | Most complex to implement |
Conclusion
Canvas fillText() does not natively support line breaks, requiring manual text splitting and multiple draw calls. For simple line breaks, split text at
2K+ Views
