HTML5 - Canvas

onload = draw;

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

//quadraticCurveTo

fillText(ctx, "quadraticCurveTo", 50,45);
ctx.beginPath();
ctx.strokeStyle = "#aaeeff";
ctx.moveTo(50,50);
ctx.lineTo(100,150);
ctx.lineTo(150,50);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(50,50);
ctx.quadraticCurveTo(100,150,150,50);
ctx.stroke();

//bezierCurveTo

fillText(ctx, "bezierCurveTo", 250,45);
ctx.beginPath();
ctx.strokeStyle = "#aaeeff";
ctx.moveTo(250,50);
ctx.lineTo(250,150);
ctx.moveTo(350,50);
ctx.lineTo(350,150);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(250,50);
ctx.bezierCurveTo(250,150,350,50,350,150);
ctx.stroke();

//arcTo

fillText(ctx, "arcTo", 50,245);
ctx.beginPath();
ctx.strokeStyle = "#aaeeff";
ctx.moveTo(50,250);
ctx.lineTo(75,375);
ctx.lineTo(150,250);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.moveTo(50,250);
ctx.arcTo(75,375,150,250,25);
ctx.stroke();

//arc

fillText(ctx, "arc", 250,245);
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.arc(300,300,50,0,Math.PI * 0.5, true);
ctx.stroke();
}

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