canvas-arc-circumference-fill.html | Explore in Territory

<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
<script>
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

// 20 angles.
var sweepAngles = [
    -123.7, -2.3, -2, -1, -0.3, -0.000001, 0, 0.000001, 0.3, 0.7,
    1, 1.3, 1.5, 1.7, 1.99999, 2, 2.00001, 2.3, 4.3, 3934723942837.3
];
for (var i = 0; i < sweepAngles.length; i++) {
    sweepAngles[i] = sweepAngles[i] * Math.PI;
}

var startAngles = [
    -1, -0.5, 0, 0.5
]
for (var i = 0; i < startAngles.length; i++) {
    startAngles[i] = startAngles[i] * Math.PI;
}

var startAngle = 0;
var anticlockwise = false;
var sign = 1;
for (var i = 0; i < startAngles.length * 2; i++) {
    if (i == startAngles.length) {
        anticlockwise = true;
        sign = -1;
    }
    startAngle = startAngles[i % startAngles.length] * sign;
    ctx.save();
    for (var j = 0; j < sweepAngles.length; j++) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(0, 2);
        ctx.arc(18, 15, 10, startAngle, startAngle + (sweepAngles[j] * sign), anticlockwise);
        ctx.lineTo(0, 28);
        ctx.fill();
        ctx.restore();
        ctx.translate(30, 0);
    }
    ctx.restore();
    ctx.translate(0, 40);
}

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/canvas/canvas-arc-circumference-fill.html
