SOURCE

var $canvas = $('#canvas')
var $editable = $('#editable')
var $hideText = $('#hideText')
var ctx = $(canvas)[0].getContext("2d");
$editable.keyup(function handleEdittable () {
  var txt = $editable.val()
  var html = txt.replace(/(\S)/ig, '<span>$1</span>')
  html = html.replace(/\n|\r/ig, '<br>')
  html = html.replace(/\s/ig, ' ')
  $hideText.html(html)
  drawText()
})
function drawText () {
  ctx.clearRect(0, 0, $(canvas).width(), $(canvas).height());
  var fontSize = $hideText.css('fontSize')
  ctx.font = fontSize + ' sans-serif'
  ctx.textAlign = 'conter'
  ctx.textBaseline = "top"
  ctx.fillStyle = '#FFFFFF'
  $.each($("#hideText span"), function (i, item) {
    var pos = $(item).position();
    var txt = $(item).text();
    ctx.fillText(txt, pos.left, pos.top);
  })
}

<p>
  输入：
</p>
<div id="editableWarp">
  <div id="hideText">
  </div>
  <textarea id="editable" placeholder="请输入文字...">
  </textarea>
</div>
<p>
  canvas输出：
</p>
<canvas id="canvas" width="400" height="125">
  您的浏览器不支持canvas。
</canvas>

* {
  margin: 0
}

#canvas,
#editableWarp,
#editable,
#hideText {
  width: 400px;
  height: 125px;
  padding: 0;
  border: 0;
  background: #333;
  color: #FFF;
  font-size: 14px;
  font-family: 'sans-serif';
  position: relative;
  z-index: 1
}

#hideText {
  z-index: 0;
  position: absolute;
  word-break: break-word;
  word-wrap: break-word;
}