CODEWITHSUNDEEP
javascripthtmlcanvas
Clemens
Clemens

Reputation: 407

HTML5: inaccurate positioning of rectangles

I'm using canvas of HTML5 to create a "preview" image which mainly consists of some rectangles and simple lines. Works fine so far, but there's one problem I cannot fix somehow. Presume the following situation: 

context.fillStyle = "rgba(0,0,0,0.75)";
context.fillRect(100.64646,100,50.94967,20);
context.fillRect(100.64646+50.94967,100,100,20);

So I'm drawing 2 rectangles with some opacity. The x-starting coordinate plus the x-length of the first rect is equal to the x-starting coordinate of the second rect, so in theory they should collide without any margin between. Sadly, the result is different: (see http://files.clemensfreitag.de/thin_spacing.jpg)

There's a very tiny spacing between the boxes, and the background color is visible. But: This problem doesn't occur if the coordinates and lengths are integer values.

Is there any way to get it done by using float values? Converting them to integers before drawing might be acceptable in my application, but I'm just wondering why this should not work with floats.

Best, Clemens

Upvotes: 0

Views: 259

Answers (2)

Denys Séguret
Denys Séguret

Reputation: 382112

This problem is related to the way objects are drawn on a float based grid (especially vertical and horizontal lines and thus rects).

See there for an explanation and a schema : http://canop.org/blog/?p=220

Depending on the size of your objects, you need to use integer or mid-integer coordinates and sizes for your shapes, the goal being to fill complete pixels in both dimensions.

For example :

  • use a mid-integer for a thin line (one pixel width)
  • use an integer coordinate for a 2 pixels wide line

(and extend the logic for rects)

Upvotes: 0

st-boost
st-boost

Reputation: 1907

What you're seeing is the result of overlaying two opaque colors. When the first rectangle ends at 151.59613, the rectangle is automatically antialiased, filling in the rightmost column with rgba(0,0,0,0.4470975). When the second rectangle starts at the same x coordinate, it is also antialiased, filling in the leftmost column (the same as the first rectangle's rightmost) with rgba(0,0,0,0.3029025). The two values do add up to rgba(0,0,0,0.75), but that's not how they are blended. Instead, the second color (rgba(0,0,0,.3029025)) is drawn on top of the first, resulting in rgba(0,0,0,0.4470975+(1-0.4470975)*0.3029025) = rgba(0,0,0,0.61457305). So there isn't actually a gap between the two rectangles, but rather a 1px column that is a slightly lighter shade of grey.

Similarly, if you were using solid colors then the second rectangle's antialiased column would overwrite the first's, resulting in an even lighter shade of grey in the "gap".

The issue does not show up with integer values because no antialiasing is required - each rectangle ends at the edge of a pixel.

It looks like none of the globalCompositeOperation settings fix this, and turning off antialiasing would sometimes result in a 1px gap, so I think your simplest solution is to force integer values (alternatively, you could clear that column then fill it in with the desired color).

Upvotes: 2

Related Questions