canvas文本自动换行扩展API wrapText效果实例页面

效果：

4日，@张继科立春发表新诗，被网友发现诗中暗藏“景甜”二字，随后@景甜留言：“叮咚！您的节气播报员上线”。此前张继科在节目中写道“K[心]T”、与景甜微博暧昧互动、行程撞车，之后恋爱绯闻愈演愈烈，双方却未回应。所以这是？

代码：

HTML代码：

<canvas width="300" height="150"></canvas>
<p><textarea cols="40" rows="5">4日，@张继科 立春发表新...嗯所以这是？</textarea></p>
<p><button>绘制</button></p>

JS代码：

// wrapText扩展方法参见页面源代码，下面显示测试JS
var textarea = document.querySelector('textarea');
var button = document.querySelector('button');

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.font = '16px sans-serif';
context.textBaseline = 'top';

button.addEventListener('click', function () {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.wrapText(textarea.value, 0, 0);
});

button.click();