HTML5 - Beginners - lineJoin.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" />
</head>
<body>
  <div id="test"></div>
<canvas id="myCanvas" width="320" height="240" style="border:1px solid #d3d3d3;">
Use different browser.
</canvas>
<script>
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");

	gameloop=setInterval(doGameLoop,16);

	function doGameLoop(){
		myCanvas.height = window.innerHeight-32;
		myCanvas.width = window.innerWidth-32;
		ctx.fillStyle="rgb(100,0,0)";
		ctx.fillRect(0,0,c.width,c.height);
		ctx.fillStyle="rgb(255,255,255)";
		ctx.fillText("lineJoin example.",10,10); 

// lineJoin 
//round,bevel,miter(default)

var x=80;
var y=100;
for(i=0;i<3;i++){
ctx.strokeStyle = 'white'
ctx.lineWidth = 20;
if(i==0)ctx.lineJoin = 'miter';
if(i==1)ctx.lineJoin = 'bevel';
if(i==2)ctx.lineJoin = 'round';
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+80, y);
ctx.lineTo(x+40,y+60);

ctx.stroke();
x+=100;
}

	}
</script>
</body>
</html>