Stroke rounded rect visual artifacts

[alexeymolchan]

Vesion: 3.12 beta 2, also 3.11

screenshot taken from example - https://labs.phaser.io/view.html?src=src/game%20objects/graphics/stroke%20rounded%20rectangle.js

These artifacts appear only on Android devices.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[photonstorm]

Does this happen in Canvas and WebGL, or just one of them? My guess would be it only happens in Canvas.

[alexeymolchan]

@photonstorm Nope, it happen in Webgl

Canvas on the screenshot

[photonstorm]

Can you test this with the current master version please? I pushed a fix for the arc function today which I'm hoping will solve this too.

[alexeymolchan]

@photonstorm CANVAS looks good, but WEBGL still has artifacts

[photonstorm]

Can you make this happen in any desktop browsers? (as I can't) - and which Android browser is it? Or is this a compiled app? May have to leave this as a known issue, because the time involved investigating it is likely prohibitive.

[alexeymolchan]

@photonstorm it happens only on Android devices, and actually not on every. It visible in Android browser (chrome), also in fb messenger (instant games)

[photonstorm]

What about the filled rounded rectangles?

And is it just rounded rects? Do other Graphics shapes appear ok?

[alexeymolchan]

only stroked rounded rect has artifacts, default rect (filled, stroked) looks fine, the same as filled rounded rect

[photonstorm]

This is what the function does:

    strokeRoundedRect: function (x, y, width, height, radius)
    {
        if (radius === undefined) { radius = 20; }

        var tl = radius;
        var tr = radius;
        var bl = radius;
        var br = radius;

        if (typeof radius !== 'number')
        {
            tl = GetFastValue(radius, 'tl', 20);
            tr = GetFastValue(radius, 'tr', 20);
            bl = GetFastValue(radius, 'bl', 20);
            br = GetFastValue(radius, 'br', 20);
        }

        this.beginPath();
        this.moveTo(x + tl, y);
        this.lineTo(x + width - tr, y);
        this.arc(x + width - tr, y + tr, tr, -MATH_CONST.TAU, 0);
        this.lineTo(x + width, y + height - br);
        this.arc(x + width - br, y + height - br, br, 0, MATH_CONST.TAU);
        this.lineTo(x + bl, y + height);
        this.arc(x + bl, y + height - bl, bl, MATH_CONST.TAU, Math.PI);
        this.lineTo(x, y + tl);
        this.arc(x + tl, y + tl, tl, -Math.PI, -MATH_CONST.TAU);
        this.strokePath();

        return this;
    },

Which is basically just a bunch of Graphics commands in a sequence. Could you try re-creating the above (so just calling the Graphics commands directly) but add in a closePath before the stroke? I'm thinking it's something like that.