求助 ，关于canvas画图点击事件

是这样的，我想做一个类似于电影院选座位的效果，用canvas标签画出多个矩形模拟座位，点击可以选中，再次点击可以取消，可以多选，即点击多个图形选中。我的思路是先取得点击事件的坐标，再判断坐标是否在绘制的矩形内。问题是canvas提供的判断坐标的方法isPointInPath只可以判断当前上下文的图形是否覆盖了你的坐标。所以必须要重绘图形，每次重绘一个图形都使用判断方法，如果点击事件坐标在图形覆盖范围内则可以响应事件。但是如果我选完一个再想选第二个的话方法就会 又重新绘制，等于之前选择的又要被重绘，不能够保存。请问大神们有没有好的解决方法呢？
这里贴出源码

<!DOCTYPE html>  

<html>  

<head>  

<title> Canvas Demo</title>  

<!--[if It IE]>  

 <script type="text/javascript" src="./excanvas.js"></script>  

<![endif]-->  

<script>  

//初始化  

window.onload=function() {   

    var canvas = document.getElementById('myCanvas');   

    if (canvas.getContext){   

        var ctx = canvas.getContext('2d');   

          

        ctx.fillStyle='blue';

	//	-----------------------------

		

        ctx.beginPath();   

        ctx.rect(10,10,50,50);   

        ctx.fill();  

		

	ctx.beginPath();   

        ctx.rect(70,10,50,50);   

        ctx.fill();  

                

        ctx.beginPath();   

        ctx.rect(130,10,50,50);   

        ctx.fill();

		

	ctx.beginPath();   

        ctx.rect(190,10,50,50);   

        ctx.fill();

		

	ctx.beginPath();   

        ctx.rect(250,10,50,50);   

        ctx.fill();

		

	ctx.beginPath();   

        ctx.rect(310,10,50,50);   

        ctx.fill();

	

	//----------------------------------------	  

 

	

		  

       

        //添加事件响应   

        canvas.addEventListener('click', function(e){   

            p = getEventPosition(e);  

			

            reDraw(p,ctx);  

			

        }, false);   

    }   

}   

//得到点击的坐标   

function getEventPosition(ev){   

    var x, y;   

    if (ev.layerX || ev.layerX == 0) {   

        x = ev.layerX;   

        y = ev.layerY;   

    }else if (ev.offsetX || ev.offsetX == 0) { // Opera   

        x = ev.offsetX;   

        y = ev.offsetY;   

    }   

    return {x: x, y: y};   

}   

//重绘   

function reDraw(p,ctx){   

    arr = [   

         

        {x:10, y:10, width:50, height:50},   

        {x:70, y:10, width:50, height:50},

        {x:130, y:10, width:50, height:50},

	{x:190, y:10, width:50, height:50},

	{x:250, y:10, width:50, height:50},

	{x:310, y:10, width:50, height:50},

		



		

              

    ]   

  

    var whichObject = [];   

    for(var i=0; i < arr.length; i++){   

            ctx.fillStyle='blue';   

            ctx.beginPath();   

            ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);   

            ctx.fill(); 

			

		  if(p && ctx.isPointInPath(p.x, p.y)){   

                whichObject.push(i);   

                ctx.fillStyle='red';

                ctx.beginPath();   

                ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);

				ctx.fill();   

            } 

            

           }  

		     

    //显示点击了哪个部分   

   // alert("click:" + whichObject[0]);   

}    

</script>  

</head>  

<body>  

<div>  

<canvas id="myCanvas" width="600" height="600"></canvas>  

<br /><br />  

</div>  

</body>  

</html>