Canvas font(1)

by MICHI CHEN

HTML

<canvas id="myFont" width="300" height="200" style="border:1px solid #999;"></canvas>

JavaScript

$(function(){
	var cxt=$('#myFont')[0].getContext('2d');
  var txt='BEAST';
  var _x=$('#myFont').width()/2;
  var _y=$('#myFont').height()/2;
  cxt.font='oblique 40px Arial';
  cxt.textAlign='center';
  cxt.textBaseline='middle';
  cxt.fillStyle='#ccc';
  cxt.fillText(txt,_x,_y-20);
  cxt.strokeStyle='#664746';
  cxt.strokeText(txt,_x,_y-20);
  
  var txtW=cxt.measureText(txt).width;
  cxt.font='normal 20px Calibri';
  cxt.fillStyle='#333';
  cxt.fillText(txtW+'PX',_x,_y+20);
});