var lineLengthOrder = lines.slice(0).sort(function(a, b) {
      return b.length - a.length;
  });
  ctx.canvas.width = ctx.measureText(lineLengthOrder[0]).width + 25;

1. Sorting all the lines just to get the longest is pretty wasteful. Try an explicit loop that iterates over the array once, keeping track of the longest line seen so far.

2. Using measureText to get the visible length of a line is a good idea, but doesn't mesh with using the .length property to find the longest line. Some characters may be wider than others, so a line containing fewer characters (shorter .length) could actually be longer (using measureText) than the one with the most characters. Try copy-pasting some Chinese from https://zh.wikipedia.org and compare with a line containing the same number of Latin characters.

To also say something positive: At least it looks nice!