まずは基本的な図形を描画する

JavaScriptで四角形や三角形、円弧を作り、canvas要素内に描画します。

<body>

<canvas id="canvas1" width="678" height="200">
  <p>お使いのブラウザはcanvas要素に対応していないので描画できませんでした</p>
</canvas>

<script>
onload = function() {
    kihon();
    pie();
};

function kihon() {
/* 描画するcanvas要素を idで指定 (変数(cnvs)に代入する) */
    var cnvs = document.getElementById('canvas1');
/* 2Dコンテキストをゲット */
    var ctx = cnvs.getContext('2d');

/* 四角形＿線（strokeStyleで線の色、strokeRect(x,y, width,height)で四角形） */
    ctx.strokeStyle = 'rgb(0,191,255)';
    ctx.strokeRect(35,50, 100,100);
/* 四角形＿塗りつぶし（fillStyleで塗りの色、fillRectで四角形） */
    ctx.fillStyle = 'rgb(129,200,49)';
    ctx.fillRect(170,50, 160,100);
/* 四角形＿くりぬき（clearRectでくりぬき） */
    ctx.clearRect(230,60, 40,80);
/* 三角形＿（多角形はmoveTo(x, y)で始点、lineTo(x, y)で直線、closePath()で始点に戻る） */
    ctx.beginPath();
    ctx.moveTo(428, 40);
    ctx.lineTo(368, 158);
    ctx.lineTo(496, 158);
    ctx.closePath();
    ctx.fillStyle = '#FFF';
    ctx.fill();
    ctx.strokeStyle = '#FF9999';
    ctx.stroke();
/* 円＿線（arc(x, y, radius, startAngle, endAngle, anticlockwise)） */
    ctx.beginPath();
    ctx.arc(410, 105, 30, 0, Math.PI*2, false);
    ctx.strokeStyle = '#6DD900';
    ctx.stroke();
/* 半円＿塗り */
    ctx.beginPath();
    ctx.arc(450, 105, 30, 0, Math.PI, false);
    ctx.fillStyle = '#FFC926';
    ctx.fill();
/* 円＿塗り＿透明度50％ */
    ctx.beginPath();
    ctx.arc(430, 135, 30, 0, Math.PI*2, false);
    ctx.fillStyle = 'rgba(255,153,153,0.5)';
    ctx.fill();
/* 円弧＿塗り（正円じゃなく、途中で途切れた円弧です） */
    ctx.beginPath();
    ctx.arc(580, 100, 60, 20*Math.PI/180, 90*Math.PI/180, true);
    ctx.fillStyle = '#DBA1AB';
    ctx.fill();
}
</script>

<!--↓サンプルではcanvas要素に背景色を付けています↓（本来canvasは透明背景で枠無し）-->
<style>canvas {background: #f8f4ec;}</style>

</body>

扇形で円グラフを作る

円弧と closePath() の応用で、円グラフを描画します。

<body>

<canvas id="canvas2" width="380" height="200">
  <p>お使いのブラウザはcanvas要素に対応していないので描画できませんでした</p>
</canvas>

<script>
onload = function() {
    kihon();
    pie();
};

function pie() {
/* canvas要素 idで指定し、2Dコンテキストをゲット*/
    var cnvs2 = document.getElementById('canvas2');
    var ctx2 = cnvs2.getContext('2d');

/* まずは扇形の基本 */
    ctx2.beginPath();
    /* 円弧の中心点をパスの始点にする */
    ctx2.moveTo(100,100)
    /* 円弧を指定。パスの始点から円弧の始点まで自動的にパスが引かれる */
    ctx2.arc(100, 100, 60, 0, Math.PI/2, false);
    /* 円弧のパスを終わらせると、自動的に始点に線を引いてパスを閉じてくれる */
    ctx2.closePath();
    /* 色を指定して塗りつぶす */
    ctx2.fillStyle = '#FFCEBE';
    ctx2.fill();
	
/* 円グラフを描く */
    /* ピンクの扇形 */
    ctx2.beginPath();
    ctx2.moveTo(260,100)
    ctx2.arc(260, 100, 60, -90*Math.PI/180, 60*Math.PI/180, false);
    ctx2.closePath();
    ctx2.fillStyle = '#FFCEBE';
    ctx2.fill();
    /* 黄緑色の扇形 */
    ctx2.beginPath();
    ctx2.moveTo(260,100)
    ctx2.arc(260, 100, 60, 60*Math.PI/180, 170*Math.PI/180, false);
    ctx2.closePath();
    ctx2.fillStyle = '#D5F558';
    ctx2.fill();
    /* イエローの扇形 */
    ctx2.beginPath();
    ctx2.moveTo(260,100)
    ctx2.arc(260, 100, 60, 170*Math.PI/180, 230*Math.PI/180, false);
    ctx2.closePath();
    ctx2.fillStyle = '#F4E43D';
    ctx2.fill();
    /* ブルーの扇形 */
    ctx2.beginPath();
    ctx2.moveTo(260,100)
    ctx2.arc(260, 100, 60, 230*Math.PI/180, 270*Math.PI/180, false);
    ctx2.closePath();
    ctx2.fillStyle = '#A1F6F5';
    ctx2.fill();
    /* テキストの描画 */
    ctx2.font = "10pt Arial";
    ctx2.fillStyle = '#666';
    ctx2.fillText("42%", 275, 95);
    ctx2.fillText("30%", 230, 130);
    ctx2.fillText("17%", 207, 93); 
    ctx2.fillText("11%", 230, 65);   
}
</script>

<!--↓サンプルではcanvas要素に背景色を付けています↓（本来canvasは透明背景で枠無し）-->
<style>canvas {background: #f8f4ec;}</style>

</body>