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.

[alexeymolchan]

i recreated, but it doesn't help at all.

this.graphics = this.add.graphics();
    const width = 100;
    const height = 50;
    const tl = 5;
    const tr = 5;
    const bl = 5;
    const br = 5;
    const x = window.innerWidth / 2;
    const y = 20;
    this.graphics.beginPath();
    this.graphics.lineStyle(2, 0x00ff00);
    this.graphics.moveTo(x + tl, y);
    this.graphics.lineTo(x + width - tr, y);
    this.graphics.arc(x + width - tr, y + tr, tr, -Math.PI * 0.5, 0);
    this.graphics.lineTo(x + width, y + height - br);
    this.graphics.arc(x + width - br, y + height - br, br, 0, Math.PI * 0.5);
    this.graphics.lineTo(x + bl, y + height);
    this.graphics.arc(x + bl, y + height - bl, bl, Math.PI * 0.5, Math.PI);
    this.graphics.lineTo(x, y + tl);
    this.graphics.arc(x + tl, y + tl, tl, -Math.PI, -Math.PI * 0.5);
    this.graphics.closePath();
    this.graphics.strokePath();

i think we can mark this bug as known issue

[photonstorm]

How about breaking it down a bit - so rather than the whole rectangle, how about just having the first moveTo, lineTo and arc calls? Do you still see it then? (comment out the rest of the commands) - if not, add the next line in and try again. I'm curious to know at which point you get one of those extra lines to appear. I'd rather solve this than leave it as-is.

[alexeymolchan]

moveTo -> lineTo -> arc

moveTo -> lineTo

[alexeymolchan]

Hi, i added moveTo after lineTo and then call arc - suddenly that moveTo fixed artifacts -__-

[photonstorm]

Does it work if you repeat for all 4 corners? If so we can merge this back in with master.

[TadejZupancic]

Could there be a problem with the negative angles? I guess there should not be as angles can be negative, but you never know. Below the angles are changed to be positive.

        this.beginPath();
        this.moveTo(x + tl, y);
        this.lineTo(x + width - tr, y);
        this.arc(x + width - tr, y + tr, tr, 3*MATH_CONST.TAU, 2*Math.PI);
        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, 3*MATH_CONST.TAU);
        this.strokePath();

[alexeymolchan]

@photonstorm yeah it does

[photonstorm]

@alexeymolchan you could try the non-negative version above, but otherwise please paste the full working combination here so I can merge it into master, as I've never been able to reproduce this, so I need to see what combination gets it working for you.

[alexeymolchan]

@photonstorm i already tried with non-negative angles, but it still produce artifacts.
Working combination:

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.moveTo(x + width - tr, y);
        this.arc(x + width - tr, y + tr, tr, -MATH_CONST.TAU, 0);
        this.lineTo(x + width, y + height - br);
        this.moveTo(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.moveTo(x + bl, y + height);
        this.arc(x + bl, y + height - bl, bl, MATH_CONST.TAU, Math.PI);
        this.lineTo(x, y + tl);
        this.moveTo(x, y + tl);
        this.arc(x + tl, y + tl, tl, -Math.PI, -MATH_CONST.TAU);
        this.strokePath();

        return this;
    },

[photonstorm]

Just to say that I can re-create this locally now, so I'll look into it further. While the above did work for me I need to understand why it's happening at all, so will carry on debugging it.

[photonstorm]

Thank you for submitting this issue (yes, 2 years ago!). We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that, although of course given the age of this issue, isn't expected at all.

[sreadixl]

I'm still seeing this issue in Phaser 3.55.2 on older Android devices (Android 5 or so) as well as Kindle devices - even new Kindles, such as the Kindle 7 running FireOS 7, however FireOS is based on an older version of Android, so I think that is why. The issue doesn't appear on Windows, Mac, or iOS, seems to be just older Android devices. The Browserstack device I test with is a Samsung Galaxy S6 running Android 5, and we have a Kindle 7 running FireOS 7 that the issues appears in as well.

[kanatev]

@photonstorm
I have the same issue with strokeRoundedRect() too.
Phaser 3.55.2 on Android 10 (Honor 10i). Any browsers on this device.
Phaser was installed as npm package.

I wrote my own func with arc. Now it works without extra lines.

This code works good:

function drawRoundedRect(x, y, width, height, angle, object){
	let graph = object.add.graphics();
	graph.beginPath();
	graph.lineStyle(4, 0x00ff00);
	graph.moveTo(x, y);
	graph.arc(x + angle,y + height,angle,Phaser.Math.DegToRad(180),Phaser.Math.DegToRad(90),true);
	graph.arc(x+angle+width,y+height,angle,Phaser.Math.DegToRad(90),Phaser.Math.DegToRad(0),true);
	graph.arc(x+angle+width,y,angle,Phaser.Math.DegToRad(0),Phaser.Math.DegToRad(270),true);
	graph.arc(x+angle,y,angle,Phaser.Math.DegToRad(270),Phaser.Math.DegToRad(180),true);
	graph.strokePath();
	return graph;
}

Hope that strokeRoundedRect() will be fixed finally :)

[Renny1]

@photonstorm I have the same issue with strokeRoundedRect() too. Phaser 3.55.2 on Android 10 (Honor 10i). Any browsers on this device. Phaser was installed as npm package.

I wrote my own func with arc. Now it works without extra lines.

This code works good:

function drawRoundedRect(x, y, width, height, angle, object){
	let graph = object.add.graphics();
	graph.beginPath();
	graph.lineStyle(4, 0x00ff00);
	graph.moveTo(x, y);
	graph.arc(x + angle,y + height,angle,Phaser.Math.DegToRad(180),Phaser.Math.DegToRad(90),true);
	graph.arc(x+angle+width,y+height,angle,Phaser.Math.DegToRad(90),Phaser.Math.DegToRad(0),true);
	graph.arc(x+angle+width,y,angle,Phaser.Math.DegToRad(0),Phaser.Math.DegToRad(270),true);
	graph.arc(x+angle,y,angle,Phaser.Math.DegToRad(270),Phaser.Math.DegToRad(180),true);
	graph.strokePath();
	return graph;
}

Hope that strokeRoundedRect() will be fixed finally :)

I changed your code a little, and I managed to fix the box better in my case, maybe it's a different version, and it worked fine for me:

  function drawRoundedRect(x, y, width, height, angle, object) {
    let graph = object.add.graphics();
    graph.beginPath();
    graph.lineStyle(4, 0x00ff00);
    graph.moveTo(x, y+angle);
    graph.arc(x + angle, y + height-angle,angle,Phaser.Math.DegToRad(180),Phaser.Math.DegToRad(90),true);
    graph.arc(x-angle+width,y+height-angle,angle,Phaser.Math.DegToRad(90),Phaser.Math.DegToRad(0),true);
    graph.arc(x-angle+width,y+angle,angle,Phaser.Math.DegToRad(0),Phaser.Math.DegToRad(270),true);
    graph.arc(x+angle,y+angle,angle,Phaser.Math.DegToRad(270),Phaser.Math.DegToRad(180),true);
    graph.strokePath();

  }