Ovals are broken - literally!

[1j01]

Ellipses are getting cut off slightly, depending on their size, ever since implementing them with webgl as polygons. Particularly, wide ovals.

Ellipses are drawn to a temporary canvas, and the bounds are not big enough to account for these quirky asymmetrical pixels jutting out of the bottom. Shown in the example image is also a tall oval, which has a horizontal tumor, but which is included in the bounds and thus rendered.

(Eventually it would be good to use a proper raster ellipse algorithm, that results in symmetrical ovals. It might make sense to still use WebGL to draw all at once for performance with large ovals, but generate the exact pixels for the border of the shape, for accuracy, just use them as vertices.)

[1j01]

This may be OS/browser/GPU-specific.

Writing some automated tests for tools, here are some results I got:

(This doesn't mean you can't get broken circles on Windows or better circles on Linux.)

[karabaja4]

Noticed this happens on NVIDIA propriatery blob drivers, but does not happen on Intel open source drivers on the same system (Arch Linux @ Chromium 88.0.4324.96). So apparently it's related to which GPU/driver is used.

[OscarCasadoLorenzo]

Hi @1j01,
I have already being testing this issue with the next driver configuration, It does not seem drivers related answer will solve the problem.
There it is the drivers of my VM:

And here the ones of the machine:

Maybe checking ellipsis generator algorithm is the best way to fix it.

[CarlosPovedaC]

Hello. I have the same problem on a 2017 macbook pro with an AMD radeon pro 560 graphics card

[OscarCasadoLorenzo]

Like I previously suggested, it happens because of the algorithm of the ellipsis (and rounded square too).

Explanation:
In your code there was a variable related to aliasing (the one you use to determine if the strokes of the shapes should be softened)...
let aliasing = true; //app.js:10

At image-manipulation.js file, the conditions under you apply aliasing and anti-aliasing algorithms are uncomplete, because the ´if´ interpolation algorithm is not suitable with small strokes, like the one that you applies by default (1px), there is the explanation of why at your tests there is no differences between shapes of third and fourth rows.

To sum up, you have two ways to solve it:

1. Consider the stroke value to apply the best suitable algorithm, like the PR Clickable inputs & Ovals fixed #316 that I propose: if (aliasing && stroke > MINIMUN_STROKE_SIZE_TO_APPLY_ALIASING)
2. Refactor your aliasing algorithm using Breseham mathematical approach.

Considerations before PR:
Using 'Fill with Color' bucket tool over one of this ellipsis will fill the full document because the errors caused by the delimiter stroke aproximations.