[Bug] Text in dynamically generated SVG/PNG is blurry in IconLayer

[travstw]

Description

When creating icons that need dynamically generated text, the text appears blurry when rendered on the map. I've tried both using SVGs and generating PNGs using canvas and both have the same result. I've made sure that the generated icon is the specified size so there should not be any scaling involved.

Below is a screenshot from the application... left icon is just a regular canvas element (not connected to the map) and the right is an IconLayer icon generated with the same canvas (and draw function) and passed to deck as an dataURL.

TextLayer does not help because we have other icons with the same problem that are not plain rectangles, and the backgrounds don't occlude properly so you get garbled text everywhere they overlap.

Am I just missing something dumb somewhere?

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

I expect the rendered icon to match the generated image/svg pixel for pixel.

Steps to Reproduce

https://codepen.io/travstw/pen/MYgepWb?editors=1010

Environment

• Framework version: [email protected]
• Browser: Chrome 131.0.6778.86
• OS: MacOS 13.6.9

Logs

No response