線を引くcanvas処理。
┌──────────────────────────────────────┐
│コンテキスト.globalCompositeOperation = 'source-over';                      │
│コンテキスト.beginPath();                                                   │
│コンテキスト.moveTo(左, 上);                                                │
│コンテキスト.lineTo(右, 下);                                                │
│コンテキスト.closePath();                                                   │
│コンテキスト.strokeStyle = 色;                                              │
│コンテキスト.stroke();                                                      │
└──────────────────────────────────────┘
  ※左上が始点、右下が終点の場合(逆とかでもOK)

で、その線を消すcanvas処理。
┌──────────────────────────────────────┐
│コンテキスト.globalCompositeOperation = 'destination-out';                  │
│コンテキスト.beginPath();                                                   │
│コンテキスト.moveTo(左, 上);                                                │
│コンテキスト.lineTo(右, 下);                                                │
│コンテキスト.closePath();                                                   │
│コンテキスト.stroke();                                                      │
└──────────────────────────────────────┘
「.globalCompositeOperation」の指定を変えてあげる。
どちらかというと透明な線を上書する(下を潰す)ようなイメージか。

ただ、ちょっとずれて消す前の線が残ることもあるようだ。

確実なのは、以下のように線を引いた領域をまるごとクリアする方法のようだ。
┌──────────────────────────────────────┐
│コンテキスト.clearRect(左, 上, 右, 下);                                     │
└──────────────────────────────────────┘
もちろんこの方法だと、領域内の他の線も消えてしまうけどね。
(キャンバスを分けてレイヤー階層にするのがよいかも)