Xuống dòng trong canvas fillText() - HTML5 Canvas line breaks

Phương thức fillText() của Canvas không hỗ trợ tự động xuống dòng (không nhận ký tự \n). Để hiển thị văn bản nhiều dòng, bạn phải tách chuỗi thủ công và gọi fillText() nhiều lần.

Giải pháp: Tách dòng và vẽ lần lượt

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.font = '16px Arial';

var text = 'Dòng thứ nhất\nDòng thứ hai\nDòng thứ ba';
var x = 50;
var y = 50;
var lineHeight = 24; // Khoảng cách dòng (thường = font-size * 1.2 - 1.5)

// Tách chuỗi theo ký tự xuống dòng
var lines = text.split('\n');

// Vẽ từng dòng
for (var i = 0; i < lines.length; i++) {
  ctx.fillText(lines[i], x, y + (i * lineHeight));
}

Hàm tiện ích tái sử dụng

function drawMultilineText(ctx, text, x, y, maxWidth, lineHeight) {
  var lines = text.split('\n');
  
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
    
    // Tự động wrap nếu dòng quá dài (optional)
    if (maxWidth && ctx.measureText(line).width > maxWidth) {
      var words = line.split(' ');
      var currentLine = words[0];
      
      for (var j = 1; j < words.length; j++) {
        var testLine = currentLine + ' ' + words[j];
        if (ctx.measureText(testLine).width > maxWidth) {
          ctx.fillText(currentLine, x, y);
          y += lineHeight;
          currentLine = words[j];
        } else {
          currentLine = testLine;
        }
      }
      ctx.fillText(currentLine, x, y);
      y += lineHeight;
    } else {
      ctx.fillText(line, x, y);
      y += lineHeight;
    }
  }
  return y; // Trả về vị trí y cuối để vẽ tiếp
}

Ví dụ sử dụng hàm tiện ích

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.font = '14px Courier New';

var longText = 'Đây là một đoạn văn bản rất dài cần được tự động ngắt dòng để vừa với chiều rộng canvas được chỉ định. Nó sẽ được xử lý bởi hàm drawMultilineText.';

drawMultilineText(ctx, longText, 20, 30, 300, 20);

Lưu ý

• ctx.measureText() chỉ đo width, không cho height → dùng lineHeight cố định.
• Font size trong ctx.font phải khớp với lineHeight tính toán.
• Canvas không có layout engine như HTML → mọi thứ phải tự tính toán.