CODEWITHSUNDEEP
javascripthtmlcanvas
Ned
Ned

Reputation: 371

HTML Canvas - glowing outline on stroke path?

I noticed a weird outline on my canvas lines. Below is an example:

http://jsfiddle.net/0Lzd562x/6/

enter image description here

The blue stroked rectangle is drawn after the red one but it looks like they mix together or there is a glow on the lines. I've tried setting the lineWidth to a larger value and it fixes the issue, but I want slim lines. Also tried using ctx.lineTo() to draw the rectangles but with same results. I want the latter (blue) rectangle to be on top overriding the right side of the red one.

Upvotes: 0

Views: 343

Answers (1)

towc
towc

Reputation: 2034

What's happening is that you're drawing lines along the splits between pixels, not in the middle of the pixels themselves. This causes the line to be rendered at half opacity on each of the pixels. Because of the opacity, the colors from both squares are being added to 2 pixels, resulting in a thick 2px purple line.

The reason for the splitting of the line is antialiasing. You can find a fantastic talk about it by Steve Wittens

You can't turn antialiasing off, but you can draw the lines in the middle of the pixels by adding .5 to the starting x/ys of the rectangles, as long as the sizes are integers

Here's the resulting fiddle: http://jsfiddle.net/0Lzd562x/11/

Upvotes: 3

Related Questions