Canvas font(2)

by MICHI CHEN

HTML

<!--Original source http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/-->
<canvas id="myFont" width="500" height="400"></canvas>

JavaScript

$(function(){
  function wrapText(cxt,txt,x,y,maxWidth,lineHeight){
  	var words=txt.split(' ');
    var line='';
    
    for(var n=0; n < words.length; n++){
    	var txtLine=line+words[n]+' ';
      var metrics=cxt.measureText(txtLine).width;
      if(metrics > maxWidth && n > 0){
      	cxt.fillText(line,x,y);
        line=words[n]+' ';
        y+=lineHeight;
      }else{
      	line=txtLine;
      };
    };
    cxt.fillText(line,x,y);
  };
  var article='The greatest test of courage on earth is to bear defeat without losing heart. 世界上對勇氣的最大考驗是忍受失敗而不喪失信心。';
  var cxt=$('#myFont')[0].getContext('2d');
  cxt.font='20px Calibri';
  cxt.fillStyle='#666';
  wrapText(cxt,article,10,20,490,30);
});