<canvas> Pixel præcision - JavaScript

Lær at tegne præcist på <canvas> så en streg bliver skarp i stedet for utydelige

Linjebredde og pixel præcision

Tegner man en streg på 1 pixel i bredden ved x = 100 så bliver linjen uskarp. Ligesom linjen yderst til venstre på dette canvas.

Browseren understøtter ikke <canvas>
Men hvorfor bliver linjen uskarp?

Det er fordi en linje på 1 pixel i bredden vokser en halv pixel til hver side så den tegnes fra 99,5 - 100,5.
Men da skærmen ikke kan vise 1 pixel på den måde så kommer den til at fylde 2 pixels på skærmen.

Tegner man i stedet linjen ved x = 100,5 så vil linjen blive skarp fordi den vil være fra 100 - 101 og dermed være præcis 1 pixel bred på skærmen.

HTML5 canvas linewidth og x
Siden er sidst opdateret mandag 25. juni 2018