Canvas lineJoin & arcTo

by MICHI CHEN

HTML

<canvas id="myCanvas" width="300" height="100"></canvas>
<canvas id="corner" width="300" height="200"></canvas>

JavaScript

$(function(){
	var cxt=$('#myCanvas')[0].getContext('2d');
  cxt.beginPath();
  cxt.moveTo(10,90);
  cxt.lineTo(50,10);
  cxt.lineTo(90,90);
  cxt.lineCap='round';
  cxt.lineJoin='round';
  cxt.strokeStyle="blue";
  cxt.lineWidth=10;
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(110,90);
  cxt.lineTo(150,10);
  cxt.lineTo(190,90);
  cxt.lineCap='butt';
  cxt.lineJoin='miter';
  cxt.strokeStyle="red";
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(210,90);
  cxt.lineTo(250,10);
  cxt.lineTo(290,90);
  cxt.lineCap='square';
  cxt.lineJoin='bevel';
  cxt.strokeStyle="green";
  cxt.stroke();
  
  var corner=$('#corner')[0].getContext('2d');
  var rectWidth=200;
  var rectHeight=180;
  var rectX=10;
  var rectY=10;
  var radius=50;
  
  corner.beginPath();
  corner.moveTo(rectX, rectY);
  corner.lineTo(rectX + rectWidth - radius, rectY);
  corner.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + radius, radius);
  corner.lineTo(rectX + rectWidth, rectY + rectHeight);
  corner.lineWidth =10;
  corner.lineCap='round';
  corner.stroke();
});