How to get rid of feathered edges on HTML5 Canvas strokes?

Currently, when using the HTML5 canvas element, stroked paths have slightly feathered edges.

Her开发者_如何学编程e is some example code I am using:

this.context.lineJoin = "round";
this.context.lineTo(x1, y1);
this.context.lineTo(x2, y2);
this.context.closePath();
this.context.stroke();

I was wondering if there was a way to create lines without slightly feathered edges.

When drawing lines, canvas automatically antialiases them, which is what you describe as feathered edges.

To avoid antialiasing, you will need to draw the lines manually using putImageData directly. (see MDN for canvas pixel manipulation)

A suitable algorithm for this is Bresenham's line algorithm which is quite easy to implement for JS/canvas.

Canvas uses subpixel accuracy.

Add 0.5 to your coorxinates. 0.0 is the border between pixels and thus line falls on two image data pixels.