Project

General

Profile

Feature #10923

Improve drawRoundRect and fillRoundRect

Added by Alexandru Lungu 8 months ago. Updated 8 months ago.

Status:
Review
Priority:
Normal
Target version:
-
Start date:
Due date:
% Done:

0%

billable:
No
vendor_id:
GCD
case_num:
version_reported:
version_resolved:
reviewer:
production:
No
env_name:
topics:

mdn.png (2.47 KB) Alexandru Lungu, 11/24/2025 04:07 AM

aa.png (2.31 KB) Alexandru Lungu, 11/24/2025 04:10 AM

mdn_overdraw.png (2.25 KB) Alexandru Lungu, 11/24/2025 04:20 AM


Related issues

Related to User Interface - Feature #10848: custom theme improvements New

History

#1 Updated by Alexandru Lungu 8 months ago

drawRoundRect and fillRoundRect are using custom paths with Bezier curves on the corners. There is a roundRect in MDN docs that did a better job. The one in trunk is generating a weird AA artifact, while roundRect is more precise. However, the color seems brighter than intended (most probably the AA still exists and brightens the color).

#2 Updated by Alexandru Lungu 8 months ago

#3 Updated by Alexandru Lungu 8 months ago

With custom path and overdraw:

With roundRect:

With roundRect and overdraw:

  • Custom path: lines + bezier curves
  • roundRect: official drawing method
  • Overdraw: another set of drawing of lines on top, to make the borders less AA.
    • The issue with overdraw is that it makes the corners slightly more brighter, as we can't overdraw bezier (if we do, we get the same AA bright color).

In trunk, there is custom path and overdraw. I experimented with roundRect and in 10923a / rev. 16292 I just committed a version with roundRect and overdraw.

Also available in: Atom PDF