ボタンのホバーでcanvasの描画、クリア

左に日本地図、右に地域名を書いたボタンを配置しました。
１）日本地図の地域にカーソルホバーで、地域名のボタンが反応、
２）地域名のボタンにカーソルホバーで、日本地図の各地域の描画が変更される
という物をjacascriptとcanvasで作成したいです。

１）日本地図の地域にカーソルホバーで、地域名のボタンが反応の部分は以下のコードで出来ました。

【html マップ部分】
<p class="map_wrapper"><canvas width="555" height="532" id="map2"></canvas><img src="images/chief_map.jpg" alt="日本地図" usemap="#japan" id="japan"></p>
<map name="japan"><!--ej01はこちらには無し-->
<area shape="poly" coords="456,12,456,72,552,144,552,12" href="ej02.html" alt="青森" id="ej02" region="ej02">
<area shape="poly" coords="456,72,456,132,504,204,552,144" href="ej03.html" alt="秋田" id="ej03" region="ej03">
<area shape="poly" coords="456,132,420,204,504,216,502,204" href="ej04.html" alt="山形"  id="ej04" region="ej04">
<!--実際にはej10までつづく-->
</map>

【Javascript マップ⇒ボタンへの処理】
$(document).ready(function ()
{
　　$('#ej02').hover(
　　　　function() {
　　　　　　$('#btn_ej02').addClass('hover_pseudo')
　　　　},function() {
　　　　　　$('#btn_ej02').removeClass('hover_pseudo')　　　　　　
　　　　}
　　);

　　$('#ej03').hover(
　　　　function() {
　　　　　　$('#btn_ej03').addClass('hover_pseudo')
　　　　},function() {
　　　　　　$('#btn_ej03').removeClass('hover_pseudo')　　　　　　
　　　　}
　　);

　　$('#ej04').hover(
　　　　function() {
　　　　　　$('#btn_ej04').addClass('hover_pseudo')
　　　　},function() {
　　　　　　$('#btn_ej04').removeClass('hover_pseudo')　　　　　　
　　　　}
　　);

２）地域名のボタンにカーソルホバーで、日本地図の各地域の描画が変更される方がうまくいきません。

【Javascript ボタン⇒マップへの処理】
//ボタンホバーで地図の描画を変更
    var canvas = document.getElementById('map2');
    var ctx = canvas.getContext('2d');
 
    var img = new Image();
    img.src = 'images/map2.jpg';

　　$('#btn_ej01').hover(
　　　　function() {
        // マスク
        ctx.beginPath();
		ctx.moveTo(456,18);
		ctx.lineTo(444,254);
		ctx.lineTo(541,280);
		ctx.lineTo(553,18);
		ctx.clip();
 
        // 画像の描画
        ctx.drawImage(img, 0, 0);
		$('#map2').css('z-index','9999')
　　　　},
		function() {
        // 画像の描画
        ctx.clearRect(0,0,canvas.width, canvas.height);
		$('#map2').css('z-index','-1')
　　　　}
　　);

　　$('#btn_ej02').hover(
　　　　function() {
        // マスク
        ctx.beginPath();
		ctx.moveTo(456,12);
		ctx.lineTo(456,72);
		ctx.lineTo(552,144);
		ctx.lineTo(552,12);
		ctx.clip();
 
        ctx.drawImage(img, 0, 0);
		$('#map2').css('z-index','9999')
　　　　},function() {
         ctx.clearRect(0,0,canvas.width, canvas.height);
		$('#map2').css('z-index','-1')
　　　　}
　　);

　　$('#btn_ej03').hover(
　　　　function() {
        // マスク
        ctx.beginPath();
		ctx.moveTo(456,72);
		ctx.lineTo(456,132);
		ctx.lineTo(504,204);
		ctx.lineTo(552,144);
		ctx.clip();
 
        ctx.drawImage(img, 0, 0);
		$('#map2').css('z-index','9999')
　　　　},function() {
         ctx.clearRect(0,0,canvas.width, canvas.height);
		$('#map2').css('z-index','-1')
　　　　}
　　);
});

下敷きとして置いた<canvas width="555" height="532" id="map2"></canvas>へボタンホバー時の日本地図を描画しctx.beginPath();で区域を限定してmap2を表示するまでは出来ていました。

ホバーを外した際に描画を消す方法が不適切なのではないかと考えております。
確認のために<canvas width="555" height="532" id="map2"></canvas>に色を付けてみると、
最初は#btn_ej01~btn_ej03とも指定した形が描画されているのですが、
2回、3回とボタンを変えホバーを繰り返すと、指定した形に描画されなくなってしまいます。

どう変更したら繰り返し描画/クリアが可能になるでしょうか？

drawImageに対し、clearRectの使用が正しいのか？など検索しております。
ctx.clearRect(456,18,444,254,541,280,553,18);等に変更すると、
その地域だけのmap2が表示が消えるのが確認できたので、

ctx.clearRect(0,0,canvas.width, canvas.height);はパスを消すための処理ではなくて、
画像を消すための処理なのかと次第にわかってきましたが（？）
パスを消すための処理にたどり着けません。

詳しい方、お教えいただけますと幸いです。