I was toying around with the HTML Canvas in a 2D context and noticed that when rendering lines, they don't always render in the same way. I've got a "somehwat" minimal example below. Basically, both paths are rendered with the same strokeStyle and lineWidth using the moveTo and lineTo primitives. However, the bottom line of the hexagon and the top one of the triangle look differently (as shown in this screenshot).
Increasing the lineWidth does seem to fix it. But I want crisp yet thin lines, so after subsequently increasing the canvas size to a multiple of what it is rendered at on the page also doesn't fix this (e.g. set lineWidth to 4, canvas size to 1600x1600 and the canvas element's style size to 400px by 400px).
What's the cause of this behaviour, or what is this called? I thought it could be anti-aliasing, but why doesn't that affect both lines in the same way?
Once I know why this happens I can start by looking into a fix, but for now I don't even know what to search for :--).
<html>
<head>
<title>The Fuck</title>
</head>
<body>
</body>
<script>
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = 400;
canvas.height = 400;
canvas.style.height = canvas.width + "px";
canvas.style.width = canvas.height + "px";
let lineWeight = 1;
let strokeStyle = "black";
let n = 6;
let r = canvas.width / 4;
let cx = canvas.width / 2;
let cy = canvas.height / 2;
let x = cx + r * Math.cos(0);
let y = cy + r * Math.sin(0);
context.save();
context.strokeStyle = strokeStyle;
context.lineWidth = lineWeight;
context.moveTo(x, y);
for (let i = Math.PI * 2 / n; i < Math.PI * 2; i += Math.PI * 2 / n) {
x = cx + r * Math.cos(i);
y = cy + r * Math.sin(i);
context.lineTo(x, y);
}
context.closePath();
context.stroke();
context.restore();
context.save();
context.strokeStyle = strokeStyle;
context.lineWidth = lineWeight;
context.moveTo(canvas.width / 4, canvas.height * 3 / 4);
context.lineTo(canvas.width * 3 / 4, canvas.height * 3 / 4);
context.lineTo(canvas.width / 2, canvas.height * 7 / 8);
context.closePath();
context.stroke();
context.restore();
</script>
</html>
