Javascript-форум - Функция при наведении на Canvas объект

Всем доброго времени суток!

я нарисовал некое подобие кольца:

<html>
	<head>
	</head>
	<body>
		<script>
			function drawArc() {
				var canvas=document.getElementById("myCanvas");
				var c=canvas.getContext("2d");
 
				var centerX = 250;
				var centerY = 250;
				var radius= 100;
				var startingAngle = 0 * Math.PI;
				var endingAngle = 1.5 * Math.PI;
				var counterclockwise = false;
 
       		 	c.arc(centerX,centerY, radius, startingAngle, 
                endingAngle,counterclockwise);
                c.lineWidth=10;
                c.strokeStyle="#eee"; // line color
                c.stroke();
			}
		</script>
	<body onload="drawArc();">
        <canvas id="myCanvas" width="500" height="500" style="background: #ccc;"></canvas>
	</body>
</html>

Как мне сделать так, чтоб при наведении именно на это кольцо, у него ширина увеличилась в 2 раза?

И если не трудно, подскажите как нарисовать оставшуюся часть кольца как другой объект и чтоб при наведении на него, тоже менялась ширина (уже его).