Multi-knob with jquery - Square canvas

Question

I have a problem with jQuery Knob when I use multi-knob.

I have 3 knobs which looks like "the unreadable clock" of this demo (the problem is in the demo too) :-

http://anthonyterrien.com/knob/

This works, but the canvas are square. The clickable zone of each knob is a square. You can try to click at the top-left, top right, bottom left and bottom right of a knob : that changes the smaller knob.

To fix it, I've added corner-radius to canvas :-

canvas {
border-radius: 1000px;
}

Now, the canvas are circles. It works with Firefox, but it doesn't work with Chrome or Safari.

You can try to move the red knob on Firefox and Chrome (last updates):

http://jsfiddle.net/5ypYj/452/

Have you other idea to make the canvas circle or anything else to make a proper clickable zone ?

Answer 1

I solved it with this post.

It wasn't the same issue, but the answer solved mine too. I had to change the index value.

$('.dial').parent('div').children('canvas').mousemove(function(event) {
        $.each($('.dial').parent('div').children('canvas'), function(key, value) {
            var canvas = value;
            var context = canvas.getContext('2d');      
            var position = getElementPosition(canvas);
            var x = event.pageX - position.x;
            var y = event.pageY - position.y;
            var color = context.getImageData(x, y, 1, 1).data;
            if(color[0] == 0 && color[1] == 0 && color[2] == 0) {
                $(canvas).parent('div').parent('div').css('z-index', '1');      
            }else {
                $(canvas).parent('div').parent('div').css('z-index', '2');
                testi();
            }
        });
    });

function getElementPosition(element) {
    var currentLeft = 0;
    var currentTop = 0;
    if(element.offsetParent) {
        do {
            currentLeft += element.offsetLeft;
            currentTop += element.offsetTop;
        }while(element = element.offsetParent);

        return { x: currentLeft, y: currentTop };
    }
    return undefined;
}

Fiddle updated for a proper clickable zone with multiknob: http://jsfiddle.net/5ypYj/455/

Thank you Kesavan ;)