| Summary: | Canvas poor text rendering on Windows using fillText() | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | jonhilton64 | ||||||
| Component: | Canvas | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | UNCONFIRMED --- | ||||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, mdelaney7 | ||||||
| Priority: | P2 | ||||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | PC | ||||||||
| OS: | Windows 8 | ||||||||
| Attachments: |
|
||||||||
Created attachment 459943 [details] Safari 15.5 matches other browsers I am unable to reproduce this bug by copying the test case from Comment 01 and changing into JS Fiddle (https://jsfiddle.net/0m1p95gx/) in Safari 15.5 on macOS 12.4. It matches other browsers and from the attached reference screenshots, it was from Safari on Windows while this bug was filed as "Mac OS X". I think it might be Windows specific font rendering issue due to different APIs (e.g. Direct2D or OpenGL etc.). I think since all browsers are now rendering text same without any issue. It should be marked as "RESOLVED INVALID" or "RESOLVED CONFIGURATION CHANGED" depending on whether it was platform specific bug or just something fixed in Safari down the line. Thanks! WebKit still supports Windows, so I don't think that testing Safari invalidates this bug report. I'm changing the version from macOS to Windows though, to reduce confusion. There is a good chance that this no longer reproduces even on Windows, of course. |
Created attachment 76973 [details] Screenshot Using Safari and WebKit.exe, the fillText() function renders poor quality fonts compared to other browsers such as IE and Chrome as shown in the attached screen shot. Here is the HTML to reproduce the problem: <!DOCTYPE html> <html> <head> <script> function draw() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.save(); context.font = '10px Arial'; context.fillText('Hello World!', 20, 10); context.font = '12px Arial'; context.fillText('Hello World!', 20, 50); context.font = '16px Arial'; context.fillText('Hello World!', 20, 90); context.font = '20px Arial'; context.fillText('Hello World!', 20, 130); context.font = '24px Arial'; context.fillText('Hello World!', 20, 170); context.restore(); } </script> </head> <body onload="draw()"> <p><canvas id="canvas" tabindex="1" width="500" height="500" /></p> </body> </html>