Canvas line & font

by MICHI CHEN

HTML

<canvas id="canvas1" width="300" height="300"></canvas>

JavaScript

$(function(){
  var cxt=$('#canvas1')[0].getContext('2d');
  cxt.beginPath();
  cxt.moveTo(10,10);
  cxt.lineTo(200,10);
  cxt.lineWidth=10;
  cxt.lineCap='butt';
  cxt.strokeStyle='red';
  cxt.stroke();
  cxt.font='20px';
  cxt.fillStyle='blue';
  cxt.fillText('Butt line', 210,15);
  
  cxt.beginPath();
  cxt.moveTo(10,30);
  cxt.lineTo(200,30);
  cxt.lineCap='round';
  cxt.stroke();
  cxt.fillText('Round line', 210,35);
  
  cxt.beginPath();
  cxt.moveTo(10,50);
  cxt.lineTo(200,50);
  cxt.lineCap='square';
  cxt.stroke();
  cxt.fillText('Square line', 210,55);
});