html5 canvas linecap,html - HTML5 Canvas and Line Width - Stack Overflow

Javascript:

var badCanvas = document.getElementById("badCanvas"),

goodCanvas = document.getElementById("goodCanvas"),

bCtx = badCanvas.getContext("2d"),

gCtx = goodCanvas.getContext("2d");

badCanvas.width = goodCanvas.width = badCanvas.height = goodCanvas.height = 300;

// Line example where the lines are blurry weird ect.

// Horizontal

bCtx.beginPath();

bCtx.moveTo(10,10);

bCtx.lineTo(200,10);

bCtx.stroke();

//Verticle

bCtx.beginPath();

bCtx.moveTo(30,30);

bCtx.lineTo(30,200);

bCtx.stroke();

// Proper way to draw them so they are "clear"

//Horizontal

gCtx.beginPath();

gCtx.moveTo(10.5,10.5);

gCtx.lineTo(200.5,10.5);

gCtx.stroke();

//Verticle

gCtx.beginPath();

gCtx.moveTo(30.5,30);

gCtx.lineTo(30.5,200);

gCtx.stroke();

// Change the line width

bCtx.lineWidth = 4;

gCtx.lineWidth = 4;

// Line example where the lines are blurry weird ect.

// Horizontal

bCtx.beginPath();

bCtx.moveTo(10,20.5);

bCtx.lineTo(200,20.5);

bCtx.stroke();

//Verticle

bCtx.beginPath()

bCtx.moveTo(50.5,30);

bCtx.lineTo(50.5,200);

bCtx.stroke();

// Proper way to draw them so they are "clear"

//Horizontal

gCtx.beginPath();

gCtx.moveTo(10,20);

gCtx.lineTo(200,20);

gCtx.stroke();

//Verticle

gCtx.beginPath();

gCtx.moveTo(50,30);

gCtx.lineTo(50,200);

gCtx.stroke();

HTML:

BadCanvas

Good Canvas

CSS:

canvas{border:1px solid blue;}

My live demo basically just recreates what the MDN says. For even stroke widths you can use integers for coordinates, for odd stroke widths you want to use .5 to get crisp lines that fill the pixels correctly.

If you consider a path from (3,1) to (3,5) with a line thickness of

1.0, you end up with the situation in the second image. The actual

area to be filled (dark blue) only extends halfway into the pixels on

either side of the path. An approximation of this has to be rendered,

which means that those pixels being only partially shaded, and results

in the entire area (the light blue and dark blue) being filled in with

a color only half as dark as the actual stroke color. This is what

happens with the 1.0 width line in the previous example code.

To fix this, you have to be very precise in your path creation.

Knowing that a 1.0 width line will extend half a unit to either side

of the path, creating the path from (3.5,1) to (3.5,5) results in the

situation in the third image — the 1.0 line width ends up completely

and precisely filling a single pixel vertical line.