【実行画面】
  1. 【実行画面のソーコード】
    <canvas id="mycanvas"></canvas>

<script>
var canvas = document.getElementById('mycanvas');
var c = canvas.getContext('2d');

// パス
c.beginPath();
c.arc(70, 60, 50, 0, 2 * Math.PI, false);
c.stroke();

// clip
c.clip();

// Image オブジェクトを生成
var img = new Image();
img.src = 'img/ffx2s.jpg';

// 画像読み込み終了してから描画
img.onload = function(){
    c.drawImage(img, 0, 0);
}
</script>
  2. 画像をクリッピングして描画します。
    arc() で矩形を描いて、クリッピングを設定します。
    c.arc(70, 60, 50, 0, 2 * Math.PI, false);
c.clip();
  3. 'img/ffx2s.jpg' で画像をロードして、onload() 関数で描画します。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)