HTML5 - Canvas

onload = draw;

function draw() {
var canvas = document.getElementById('canvas');
if (!canvas || ! canvas.getContext) {
return false;
}
var ctx = canvas.getContext('2d');

//lineJoin

fillText(ctx, "lineJoin = bevel/round/miter(+ miterLimit)", 10,45);
ctx.lineWidth = 10;
ctx.beginPath();
ctx.lineJoin = "bevel";
ctx.moveTo(50,60);
ctx.lineTo(100,160);
ctx.lineTo(150,60);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(50,100);
ctx.lineTo(100,200);
ctx.lineTo(150,100);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(50,140);
ctx.lineTo(100,240);
ctx.lineTo(150,140);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.miterLimit = 3.0;
ctx.moveTo(50,180);
ctx.lineTo(100,360);
ctx.lineTo(150,180);
ctx.stroke();

ctx.lineWidth = 1;
ctx.strokeStyle = "#aaeeff";

ctx.lineJoin = "bevel";
ctx.moveTo(50,60);
ctx.lineTo(100,160);
ctx.lineTo(150,60);
ctx.moveTo(50,100);
ctx.lineTo(100,200);
ctx.lineTo(150,100);
ctx.moveTo(50,140);
ctx.lineTo(100,240);
ctx.lineTo(150,140);
ctx.moveTo(50,180);
ctx.lineTo(100,360);
ctx.lineTo(150,180);
ctx.stroke();

//lineCap
fillText(ctx, "lineCap = butt/round/square", 230,45);
ctx.lineWidth = 10;
ctx.strokeStyle = "#000000";
ctx.beginPath();
ctx.lineCap = "butt";
ctx.moveTo(240,70);
ctx.lineTo(370,70);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(240,100);
ctx.lineTo(370,100);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(240,130);
ctx.lineTo(370,130);
ctx.stroke();

ctx.lineWidth = 1;
ctx.strokeStyle = "#aaeeff";
ctx.beginPath();
ctx.lineCap = "butt";
ctx.moveTo(240,70);
ctx.lineTo(370,70);
ctx.moveTo(240,100);
ctx.lineTo(370,100);
ctx.moveTo(240,130);
ctx.lineTo(370,130);
ctx.stroke();
}

function fillText(ctx, str, x, y) {
if (ctx.fillText) {ctx.fillText(str, x, y)}
}