How to implement multiple arch on single canvas wi

Question

I am referring jsfiddle for reference. In this blue arch is reducing with knob but other arch are not working with knob. Can any one please suggest any reference for this.

[Canvas][1]

[1]: http://jsfiddle.net/matthias_h/L5auuagc/enter code here

Answer 1

As i mentioned in the comment, this is a stacking problem. Since knob uses canvas, all thee canvases are stacked up with position: absolute. So always the top one receives all the events.

What you can do is get the mouse position when the mouse moves on any of the canvas and get the color of all the canvases on that particular position. If the color is transparent/no color then push the canvas down in the stack by setting a negative z-index. If it has some color then push it up in the stack by setting a positive z-index.

Here is a code sample:

HTML

<input class="knob" type="text" value="100" data-angleOffset="120" data-angleArc="120" data-fgColor="red" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="0" data-angleArc="120" data-fgColor="green" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="240" data-angleArc="120" data-fgColor="blue" data-displayInput="false" />

JS

$(function () {
    $('.knob').knob({});
    $('.knob').parent('div').css('position', 'absolute');

    $('.knob').parent('div').children('canvas').mousemove(function(event) {
        $.each($('.knob').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').css('z-index', '-1');
            }else {
                $(canvas).parent('div').css('z-index', '1');
            }
        });
    });
});

To get the exact mouse position, find the position of the canvas element on the document using the following function:

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;
}

Here is the fiddle for you:

http://jsfiddle.net/k7moorthi/n8nnpyw6/5/

CREDITS:

lwburk for exact element position on document and color of a particular point in canvas code snippets.