【実行画面】
  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)