search

ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 752 forks source link

line width=1 strange behaviour #938

Closed brano123 closed 10 years ago

brano123 commented 10 years ago

Hi,

when I draw shape with strokeWidth: 1 on position x,y than drawn border seems to have more than 1 pixel (1 pixel line is drawn "in the middle of two pixels" so it seems thicker as 1 pixel).

If I draw the same shape on position x+0.5, y+0.5 than it seems OK.

Is it bug ? If not, should I always add 0.5 of pixel to have real 1px line ?

Example: http://jsfiddle.net/ySU5B/

lavrton commented 10 years ago

html5 canvas stroke always draws half-inside / half-outside the stroke's path That means you have 2 antialiased pixels stroke.