Function drawEllipseGradient

src/engineDraw.js:751–815

(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLEAR_WHITE, angle=0, useWebGL=glEnable, screenSpace=false, context)

 *  @memberof Draw */
let drawEllipseGradientOffset = 0;
function drawEllipseGradient(pos, size=vec2(1), colorInner=WHITE, colorOuter=CLEAR_WHITE, angle=0, useWebGL=glEnable, screenSpace=false, context)
{
    ASSERT(isVector2(pos), 'pos must be a vec2');
    ASSERT(isVector2(size), 'size must be a vec2');
    ASSERT(isColor(colorInner) && isColor(colorOuter), 'color is invalid');
    ASSERT(isNumber(angle), 'angle must be a number');
    ASSERT(!context || !useWebGL, 'context only supported in canvas 2D mode');

    if (headlessMode) return;

    if (useWebGL && glEnable)
    {
        ASSERT(!!glContext, 'WebGL is not enabled!');
        if (screenSpace)
        {
            // convert to world space
            pos = screenToWorld(pos);
            size = size.scale(1/cameraScale);
            angle += cameraAngle;
        }
        // fan as tristrip; rotate the boundary vertex by one slice per call
        // so back-to-back gradients at the same position have their hole
        // (from gpu edge-rule on the boundary line-degen) at different rim
        // verts and don't visibly stack
        const sides = glCircleSides;
        const radiusX = size.x/2, radiusY = size.y/2;
        const innerInt = colorInner.rgbaInt();
        const outerInt = colorOuter.rgbaInt();
        const offset = drawEllipseGradientOffset++;
        const c = cos(-angle), s = sin(-angle);
        const rim = (a) =>
        {
            const lx = sin(a)*radiusX, ly = cos(a)*radiusY;
            return vec2(pos.x + lx*c - ly*s, pos.y + lx*s + ly*c);
        };
        const startA = (offset%sides)/sides*PI*2;
        const points = [rim(startA)];
        const colors = [outerInt];
        for (let i=sides; i--;)
        {
            const a = ((i+offset)%sides)/sides*PI*2;
            points.push(pos);
            colors.push(innerInt);
            points.push(rim(a));
            colors.push(outerInt);
        }
        glDrawColoredPoints(points, colors);
    }
    else
    {
        // normal canvas 2D rendering method (slower)
        ++drawCount;
        ++primitiveCount;
        drawCanvas2D(pos, size, angle, false, (context)=>
        {
            const gradient = context.createRadialGradient(0, 0, 0, 0, 0, .5);
            gradient.addColorStop(0, colorInner.toString());
            gradient.addColorStop(1, colorOuter.toString());