HTML5의 Canvas에 대해서 대략적인 소개가 잘 되어 있는 사이트가 있다.
>Dive into HTML5 – Let’s Call It a Draw(ing Surface)
그 중에서 아래 내용은 canvas에서 1px의 라인을 그릴 때에 대한 tip이다. 좌표를 지정하고 라인을 그리는데, 예를 들어 (1,0)에서 (1, 10)으로 1px 두께의 라인을 그린다면, 좌표 1을 기준으로 0.5px씩 잡아서 라인을 그린다는 것인데, 실제로 스크린의 물리적인 픽셀 사이에 걸쳐지기 때문에 제대로 1px의 라인이 그려지지 않는다는 것이 요점이다.
따라서 1px의 라인을 정확하게 그리려면 기준점을 0.5 단위로 잡아야 하고, 예를 들어 (1.5, 0)에서 (1.5, 10)와 같이 잡아줘야 한다는 것이다.
————————————————————————–
Q: Why did you start x and y at 0.5? Why not 0?
A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line’s direction.
For example, if you try to draw a line from (1, 0) to (1, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:
But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1.5, which results in a true 1-pixel-wide line:
Thanks to Jason Johnson for providing these diagrams.