[html5] 2D Canvas

[Philip Taylor]

On Sun, May 9, 2010 at 11:52 AM, Saurabh Jain <saurabh at skjworld.com> wrote:
> Hi,
> Can anybody please tell me that if my software has the rectangle from x : 0,
> y : 0 to x : 100 and Y : 100 in Java and I am porting it to HTML 5 Canvas
> then should I add 0.5 to my coordinates or subtract to get a crisp rectangle
> and keeping it still compatible with my Java graphics model? Taking whole
> numbers is diffusing the rectangle stroke. In HTML 5 Canvas the coordinate
> system starts at 0.5 or -0.5?

It starts at 0. Quoting from http://diveintohtml5.org/canvas.html :

  "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."

The same applies to rectangles. If you're drawing a filled rectangle
then you want to use whole numbers for the corners, so the shape fills
the whole of the edge pixels; but if you're drawing a stroked
rectangle then you want to add 0.5, so the stroke lines are centered
in the middle of the edge pixels rather than overlapping two rows of
pixels.

-- 
Philip Taylor
excors at gmail.com