canvasにマウスイベントをサポートさせる

canvasの中の画像はカスタムイベントをサポートしないで、多少プログラミングに少し面倒をもたらして、良いcontextがあります.所定の左側が現在の経路にあるか否かを判断することができるisPointInPath(x,y)法.マウスイベントが発生すると、既存の図形を再描画し、この方法を呼び出して判断することで、クリックした図形がどの図形であるかを知ることができる.
余計なことは言わないで、キーコードを見てください.

$(function(){
	g_shapes = [];    //      
	var rect = $("#dia")[0].getBoundingClientRect();
	var tPoint = {"x":rect.left,"y":rect.top};    //canvas  
	ctx = $("#dia")[0].getContext("2d");

	var c1 = new shape("c1",100,300);
	c1.click = function(e){
		alert(this.name+" was clicked at "+e.x+","+e.y);
	}

	var c2 = new shape("c2",400,300,"#800040");
	c2.click = function(e){
		alert(this.name+" was clicked at "+e.x+","+e.y);
	}

	$("#dia").click(function(env){
		var point = {"x":env.pageX-tPoint.x,"y":env.pageY-tPoint.y};
		for(var i=0;i			g_shapes[i].reDraw(point);
		}
	}).mousemove(function(env){
		var point = {"x":env.pageX-tPoint.x,"y":env.pageY-tPoint.y};
		$("#pp").html(point.x+","+point.y);
	});
});

function shape(name,x,y,color){
	this.name = name;
	this.click = null;
	this.x = x;
	this.y = y;
	this.r = 40
	this.color = color || "#000000";

	ctx.beginPath();
	ctx.moveTo(this.x, this.y - this.r);
	ctx.arc(this.x, this.y, this.r, 2 * Math.PI, 0, true);
	ctx.fillStyle = color;
	ctx.fill();
	ctx.closePath();
	g_shapes.push(this);
}

shape.prototype.reDraw = function(point){
	ctx.beginPath();
	ctx.fillStyle = this.color;
	ctx.arc(this.x, this.y, this.r, 2 * Math.PI, 0, true);
	if (ctx.isPointInPath(point.x,point.y)) {
		$("#console").append("
"+this.name+" was clicked"+"
");
		this.click.call(this,point);
	}
	ctx.closePath();
}

shape.prototype.click = function(fn){
	this.click = fn;
}