Blurry chart lines

[ZsharE]

Interactive example: https://codepen.io/ZsharE/pen/NWGBpoZ

Expected Behavior

The sparkline chart should be sharp. The straight line should be white.

Current Behavior

The sparkline chart is blurry. The straight line is not white (looks like it has some kind of transparency). It's like you draw a line with a pencil that is not sharpened enough.

Steps to Reproduce (for bugs)

Go to: https://cdpn.io/ZsharE/debug/NWGBpoZ/GnAnbOoNqEZA

Browser zoom level 100%: the line chart is blurry.

Browser zoom level 125%: the line chart is sharp.

Environment

• Chart.js version: 2.9.3
• Browser name and version: Chrome, Firefox (latest version)
• Resolution: 1920 x 1080 (native)

[benmccann]

I don't know if this is the issue, but one thought I have: Drawings on canvas need to be aligned to 0.5 pixel. helpers._alignPixel does this, but is called only for the grid. This might make some drawings blurry since the controllers and elements generally don't account for this. We could consider just translating the canvas by (0.5, 0.5) once instead of adding (0.5, 0.5) to every point we draw

[kurkle]

HTML canvas does anti-aliasing.
Try setting the borderWidth to a bit higher value (1.5 or 2 for example)

1px:

1.5px:

2px:

[kurkle]

I don't know if this is the issue, but one thought I have: Drawings on canvas need to be aligned to 0.5 pixel. helpers._alignPixel does this, but is called only for the grid. This might make some drawings blurry since the controllers and elements generally don't account for this. We could consider just translating the canvas by (0.5, 0.5) once instead of adding (0.5, 0.5) to every point we draw

That one depends on the device too. With devicePixelRation of 2, it makes no difference. With 1.25 translating by 0.5 its going to be 0.25 pixels off. I think translating by (devicePixelRatio % 2) / 2 would be optimal for straight horizontal / vertical lines, but its actually worse for curves.

[benmccann]

its actually worse for curves

Is there any optimal behavior for curves or should we just ignore trying to align curves?

[kurkle]

Is there any optimal behavior for curves or should we just ignore trying to align curves?

The behavior of drawing "between pixels" was probably chosen to make images look better by default. It works well for anti-aliasing. Only drawback is the 1px vertical / horizontal lines that are not sharp.

Translating only the h / v lines makes them half a pixel off compared to other lines. Bar chart bars could be aligned too, to make them sharper and look good both sides of the origin (origin needs to be reserved its width though).

[etimberg]

One thing to keep in mind with translating with the devicePixelRatio is that it can change with time. ctrl + mousewheel zoom will change it, and different monitors could have different ratios. If we can reliably detect these scenarios, that would be good.

[leeoniya]

ctrl + mousewheel zoom will change it

i think you'd have to poll for it, as [1] seems insufficient :(

although you could bind mousewheel & key events (since ctrl + +) also does this.

[1] https://stackoverflow.com/questions/28905420/window-devicepixelratio-change-listener/29653772#29653772

[kurkle]

I don't think there is anything more we can do about this.