Question

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

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

Answer 1

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.