Pie Chart With Hover And Obtuse

by rudigerkidd

HTML

<canvas id="canvaspiechart" width="300" height="300"></canvas>
<div id="result">hmm</div>

JavaScript

canvas = document.getElementById('canvaspiechart');
ctx = canvas.getContext('2d');

var cx = 150;
var cy = 150;
var sectorsarray = [];

function toRadians(deg) {
    return deg * Math.PI / 180
}

function drawpiechart() {

    ctx.fillStyle = '#fdbb30';
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, 125, 0, toRadians(90));
    ctx.lineTo(cx, cy);
    ctx.closePath();
    ctx.fill();

    var yellow = {
        start: 0,
        end: toRadians(90),
        name: "yellow"
    };
    sectorsarray.push(yellow);

    ctx.fillStyle = '#0087dc';
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, 125, toRadians(90), toRadians(120));
    ctx.lineTo(cx, cy);
    ctx.closePath();
    ctx.fill();

    var blue = {
        start: toRadians(90),
        end: toRadians(120),
        name: "blue"
    };
    sectorsarray.push(blue);

    ctx.fillStyle = '#EEEEEE';
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, 125, toRadians(120), toRadians(360));
    ctx.lineTo(cx, cy);
    ctx.closePath();
    ctx.fill();

    var grey = {
        start: toRadians(120),
        end: toRadians(360),
        name: "grey"
    };
    sectorsarray.push(grey);

}

drawpiechart()

function isInsideSector(point, center, radius, angle1, angle2) {
    function areClockwise(center, radius, angle, point2) {
        var point1 = {
            x: (center.x + radius) * Math.cos(angle),
            y: (center.y + radius) * Math.sin(angle)
        };
        return -point1.x * point2.y + point1.y * point2.x > 0;
    }

    var relPoint = {
        x: point.x - center.x,
        y: point.y - center.y
    };

    var bigangle = angle2 - angle1
    if (bigangle > 1.4) {
        var tempanglearray = [];
        var tempstartangle = angle1
        while (tempstartangle < angle2) {
            console.log(tempstartangle);
            var tempendangle = tempstartangle + 1.4;
            var temptest = !areClockwise(center, radius, tempstartangle, relPoint) &&...