var myCanvas = document.getElementById("myCanvas");

myCanvas.width = 500;

myCanvas.height = 500;

​

var ctx = myCanvas.getContext("2d");

​

function drawLine(ctx, startX, startY, endX, endY, color) {

  ctx.save();

  ctx.strokeStyle = color;

  ctx.beginPath();

  ctx.moveTo(startX, startY);

  ctx.lineTo(endX, endY);

  ctx.stroke();

  ctx.restore();

}

​

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle, color) {

  ctx.save();

  ctx.strokeStyle = color;

  ctx.beginPath();

  ctx.arc(centerX, centerY, radius, startAngle, endAngle);

  ctx.stroke();

  ctx.restore();

}

​

function drawPieSlice(

  ctx,

  centerX,

  centerY,

  radius,

  startAngle,

  endAngle,

  fillColor,

  strokeColor

) {

  ctx.save();

  ctx.fillStyle = fillColor;

  ctx.strokeStyle = strokeColor;

  ctx.beginPath();

  ctx.moveTo(centerX, centerY);

  ctx.arc(centerX, centerY, radius, startAngle, endAngle);

  ctx.closePath();

  ctx.fill();

  ctx.stroke();

  ctx.restore();

}

​

drawLine(ctx, 200, 200, 300, 300, "#000");

drawArc(ctx, 250, 250, 150, 0, Math.PI/3, "#000");

drawPieSlice(ctx, 250, 250, 150, Math.PI/2, Math.PI/2 + Math.PI/3, "#F00", "#000");

​