[html5] 2D Canvas

Philip Taylor excors at gmail.com
Sun May 9 06:52:29 PDT 2010

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

Philip Taylor
excors at gmail.com

More information about the Help mailing list