どうだい、このパス。良いラインしてるだろう・・・

塗りつぶし・クリッピング・座標とパスの確認
最後は文字だけじゃピンとこない感じですね。

context.fill()

塗りつぶしです。
現在の塗りつぶしスタイルでサブパスを塗りつぶします。ﾍﾞﾁｬｰ
塗りつぶしには、fillStyleで設定してあげましょう。 塗りつぶしは、現在のパスに含まれるすべてのサブパスに対して適用されます。
閉じていないサブパスも塗りつぶされますが、実際にサブパスが閉じられるわけではありません。

var canvas1 = document.getElementById('canvas01');
canvas1.width = 200;
canvas1.height = 200;
if (canvas1.getContext) {
  var context1 = canvas1.getContext('2d');
  // 新しいパスを開始する
  context1.beginPath();
  // 四角の生成
  context1.rect(30, 50, 70, 70);
  // 塗りつぶし背景色の設定
  context1.fillStyle = '#FF0000';
  // 塗りつぶし
  context1.fill();
  // 輪郭線の描画
  context1.stroke();


  // 新しいパスを開始する
  context1.beginPath();
  // 100 30の位置に筆を置く
  context1.moveTo(50,30);
  // 制御点を150 70にセットし、曲線の終点を200 30に設定する
  context1.arcTo(130, 150, 220, 70, 80);
  // 塗りつぶし背景色の設定
  context1.fillStyle = '#00FFFF';
  // 塗りつぶし
  context1.fill();
  // 輪郭線の描画
  context1.stroke();
}

context.clip()

切り取りを行います。
選択した範囲のみ表示させる感じですね。
cssのoverflow:hiddenみたいな動作と思ってもらってもよいですが
clipは【切り取り領域を設定する】的なニュアンスで・・・
説明がややこしー
まずは、説明前に基本形。最初に四角作って円弧書いてます。

var canvas2 = document.getElementById('canvas02');
canvas2.width = 200;
canvas2.height = 200;
if (canvas2.getContext) {
  var context2 = canvas2.getContext('2d');
  // 新しいパスを開始する
  context2.beginPath();
  // 四角の生成
  context2.rect(40, 30, 80, 60);
  // 塗りつぶし背景色の設定
  context2.fillStyle = '#FF0000';
  // 塗りつぶし
  context2.fill();
  // 輪郭線の描画
  context2.stroke();

  // 新しいパスを開始する
  context2.beginPath();
  // 0 0の位置に筆を置く
  context2.moveTo(0,0);
  // 制御点を130 150 円半径220 終点x70y80とする
  context2.arcTo(130, 150, 220, 70, 80);
  // 塗りつぶし背景色の設定
  context2.fillStyle = '#00FFFF';
  // 塗りつぶし
  context2.fill();
  // 輪郭の描画
  context2.stroke();
}

では切り取りを行います。
切り取り範囲を四角描画部分にしてやってみましょう。

var canvas3 = document.getElementById('canvas03');
canvas3.width = 200;
canvas3.height = 200;
if (canvas3.getContext) {
  var context3 = canvas3.getContext('2d');
  // 新しいパスを開始する
  context3.beginPath();
  // 四角の生成
  context3.rect(40, 30, 80, 60);
  // 塗りつぶし背景色の設定
  context3.fillStyle = '#FF0000';
  // 塗りつぶし
  context3.fill();
  // 輪郭線の描画
  context3.stroke();

  //上で作成した四角を切り抜き対象とする
  context3.clip();
  // 切り抜き色の指定
  context3.fillStyle = '#000000';
  // x:40 y:20 w:100 h:100で切り抜き
  context3.fillRect(40,20,100,100);

  // 新しいパスを開始する
  context3.beginPath();
  // 0 0の位置に筆を置く
  context3.moveTo(0,0);
  // 制御点を130 150 円半径220 終点x70y80とする
  context3.arcTo(130, 150, 220, 70, 80);
  // 塗りつぶし背景色の設定
  context3.fillStyle = '#00FFFF';
  // 塗りつぶし
  context3.fill();
  // 輪郭の描画
  context3.stroke();
}

円弧部分おも消えてしまいました。
ジーザス
では今度は円弧部分を切り取り範囲としてやってみます。

var canvas4 = document.getElementById('canvas04');
canvas4.width = 200;
canvas4.height = 200;
if (canvas4.getContext) {
  var context4 = canvas4.getContext('2d');
  // 新しいパスを開始する
  context4.beginPath();
  // 四角の生成
  context4.rect(40, 30, 80, 60);
  // 塗りつぶし背景色の設定
  context4.fillStyle = '#FF0000';
  // 塗りつぶし
  context4.fill();
  // 輪郭線の描画
  context4.stroke();

  // 新しいパスを開始する
  context4.beginPath();
  // 0 0の位置に筆を置く
  context4.moveTo(0,0);
  // 制御点を130 150 円半径220 終点x70y80とする
  context4.arcTo(130, 150, 220, 70, 80);
  // 塗りつぶし背景色の設定
  context4.fillStyle = '#00FFFF';
  // 塗りつぶし
  context4.fill();
  // 輪郭の描画
  context4.stroke();

  //上で作成した円弧を切り抜き対象とする
  context4.clip();
  // 切り抜き色の指定
  context4.fillStyle = '#000000';
  // x:40 y:20 w:100 h:100で切り抜き
  context4.fillRect(40,20,100,100);
}

次は四角は生きていますが、円弧の中一部分が切り取られている事になりましたね

どういう事なん！？

そもそもclipは、呼び出される直前までに生成されたサブパスの図形で、切り取り窓がセットされます。
また、clipは、切り取り窓内に表示させたいものを描く前に、呼び出されなくてはいけません。
砕いた表現をすると 先に表示領域を決めておいてから、その中に表示したいものを描くようにしようね。って事です。
使いドコロはまぁ、難しいですが、まったく使わないメソッドでもない感じです。

context.isPointInPath(x, y)

指定座標がパスの内側にあるかどうかを確認する際に使用します。
座標(x, y)が現在のパスの内側にある場合にはtrue、外側にある場合にはfalseが返ります。

x40y30の位置にw80h60四角を生成しました。
この時、x100y100　x50y60 の２つの座標を指定した場合をみてみます。下記リンクから確認できます。

x40y30の位置にw80h60四角を生成って事なので、被り範囲としては
x40～120
y30～90
の双方が被る地点がアウトとみなされますね。

var canvas5 = document.getElementById('canvas05');
canvas5.width = 200;
canvas5.height = 200;
if (canvas5.getContext) {
  var context5 = canvas5.getContext('2d');
  // 新しいパスを開始する
  context5.beginPath();
  // x40y30の位置に四角の生成
  context5.rect(40, 30, 80, 60);
  // 塗りつぶし背景色の設定
  context5.fillStyle = '#FF0000';
  // 塗りつぶし
  context5.fill();
  // 輪郭線の描画
  context5.stroke();

  c05x100y100 = context5.isPointInPath(100,99);
  c05x50y60   = context5.isPointInPath(50,60);
}
$('.canvas05btn1').on('click',function(){ alert(c05x100y100); });
$('.canvas05btn2').on('click',function(){ alert(c05x50y60); });

先ほどの四角の下にさらにもう一つ作ってみます。
x40y100の位置にw80h60四角を生成しました。
この時、x100y100　x50y60 の２つの座標を指定した場合をみてみます。下記リンクから確認できます。

今回の範囲としては
x40～120 y30～90
x40～120 y100～160
がそれぞれ範囲となるため、x100y100２番目の四角に被っている(true)x50y60は最初の四角に被っている(true)
となればいいんですが、結果見た通り。なりませんでした。

切り取りの時も同じ問題がありました。
つまりこれも直前のパスに対しての条件がつきます。
なので、２番目の四角範囲は有効になるけど、最初の四角範囲は対象外となるわけですね
なんとも使い勝手が悪そうですが、回避策や実際にどうなの？って話は基本メソッドが終わってからにしましょう。

var canvas6 = document.getElementById('canvas06');
canvas6.width = 200;
canvas6.height = 200;
if (canvas6.getContext) {
  var context6 = canvas6.getContext('2d');
  // 新しいパスを開始する
  context6.beginPath();
  // x40y30の位置に四角の生成
  context6.rect(40, 30, 80, 60);
  // 塗りつぶし背景色の設定
  context6.fillStyle = '#FF0000';
  // 塗りつぶし
  context6.fill();
  // 輪郭線の描画
  context6.stroke();

  // 新しいパスを開始する
  context6.beginPath();
  // x40y30の位置に四角の生成
  context6.rect(40, 100, 80, 60);
  // 塗りつぶし背景色の設定
  context6.fillStyle = '#FF0000';
  // 塗りつぶし
  context6.fill();
  // 輪郭線の描画
  context6.stroke();

  c06x100y100 = context6.isPointInPath(100,100);
  c06x50y60   = context6.isPointInPath(50,60);
}
$('.canvas06btn1').on('click',function(){ alert(c06x100y100); });
$('.canvas06btn2').on('click',function(){ alert(c06x50y60); });