[devarts]

Как в конвасе можно выделить сектор и к нему добавить обработчик событий, те чтобы при наведении сектор уменьшался.
Я сделал так, но там обработчик на теге канвасе, а надо на секторе

window.onload = main;
function main()
{
    function Circle(ctx, w, h, datalist, radius)
    {

        var centerx = w / 2;
        var centery = h / 2;
        var total = 0;
        for(x=0; x < datalist.length; x++) { total += datalist[x]; }
        var lastend=0;
        var offset = Math.PI / 2;
        for(x=0; x < datalist.length; x++)
        {
            var thispart = datalist[x];
            ctx.beginPath();
            ctx.fillStyle = colist[x];
            ctx.moveTo(centerx,centery);
            var arcsector = Math.PI * (2 * thispart / total);
            ctx.arc(centerx, centery, radius[x], lastend - offset, lastend + arcsector - offset, false);
            ctx.lineTo(centerx, centery);
            ctx.fill();
            ctx.closePath();
            lastend += arcsector;
        }
    }

    var h=500;
   var radius = new Array(h / 2 ,h / 2 ,h / 2 );
    var datalist= new Array(120,120,120);
    var colist = new Array('red', 'green', 'yellow');
    var canvas = document.getElementById("myCanvas1");
    var ctx = canvas.getContext('2d');
    Circle(ctx, canvas.width, canvas.height, datalist, radius);
    var id;


    function draw(event) {
        event = event || window.event;


        ctx.clearRect(0, 0, canvas.width, canvas.height);

       radius[0]-=5;
       id=setTimeout(draw, 50);
       if(radius[0]<40)
        {
            clearTimeout(id);
        }

        x= (event.layerX == undefined ? event.offsetX : event.layerX);
        y= (event.layerY == undefined ? event.offsetY : event.layerY);


        Circle(ctx, canvas.width, canvas.height, datalist, radius);


    }

    canvas.addEventListener('mouseover', draw, false);

}