plotters-rs / plotters-canvas

Plotters HTML5 Canvas-WASM Backend
MIT License
33 stars 20 forks source link

fix half-pixel offsets #2

Open Pascal-So opened 2 years ago

Pascal-So commented 2 years ago

In 38/plotters#165 the tick lines look like they're two pixels wide instead of one as intended, as well as at half opacity, which would indicate that the error comes from the line being rendered on the border between two pixel rows instead of within one row of pixels.

This change moves line endpoints by +0.5 in both the x and y direction so that the endpoints lie in the centers of pixels. That by itself however would leave the pixels at the line ends only half-covered, so we need to add the square linecap to the lines which then completely fills up the endpoint pixels.

Here is the new behaviour of the wasm-demo example when selecting "Graph of y=x^3" in the drop-down. canvas-1 canvas-2 canvas-3

A downside of this approach is that this slightly changes the behaviour of line-width. A LineSeries with width 20 will now continue for 10 more pixels on either side. Is this a problem? See example here:

image

redforks commented 1 year ago

Maybe no need to offset 0.5 pixel everywhere, hack vertical/horizontal line would fix most problems,