如何在二次y轴上绘制多行字符的多条字符？

// 创建画布
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 300;
document.body.appendChild(canvas);

// 获取画布上下文
var ctx = canvas.getContext('2d');

// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(50, 250);
ctx.lineTo(450, 250);
ctx.stroke();

// 定义字符和字符行数
var chars = ['A', 'B', 'C', 'D', 'E'];
var lines = [
  ['A', 'B', 'C', 'D'],
  ['A', 'B', 'C'],
  ['A', 'B'],
  ['A', 'B', 'C', 'D', 'E'],
  ['A']
];

// 计算每行字符的y轴位置
var lineHeight = 30;
var startY = 200;
var y = startY;
var lineCount = lines.length;

// 循环绘制每行字符
for (var i = 0; i < lineCount; i++) {
  var line = lines[i];
  var charCount = line.length;

  // 绘制每行字符
  for (var j = 0; j < charCount; j++) {
    var char = line[j];
    ctx.fillText(char, 60 + j * 40, y);
  }

  // 更新y轴位置
  y -= lineHeight;
}

// 绘制完毕后，可以通过toDataURL()方法将画布内容转换为图片
var imageSrc = canvas.toDataURL();
console.log(imageSrc);