Settings canvas linewidth > 1 gives pointy polygons

const canvas = document.getElementById('canvas') canvas.width = 256 canvas.height = 256 // Set a background const ctx = canvas.getContext('2d') ctx.fillStyle = "#EEEEEE"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Draw expected bounding box with lineWidth 1, this is correct ctx.strokeStyle = 'blue' ctx.lineWidth = 1 ctx.strokeRect(100, 100, 12, 26) // Draw a triangle / polygon that exceeds the bounding box when the lineWidth > 1 const line = [112, 112, 100, 100, 112, 124, 112, 112] // [x1, y1, x2, y2, etc.] drawPolygon(line, 'red', 5) // Incorrect // drawPolygon(line, 'orange', 2) // Incorrect drawPolygon(line, 'green', 1) // Correct function drawPolygon(points, color, lineWidth) { ctx.strokeStyle = color ctx.lineWidth = lineWidth ctx.beginPath() ctx.moveTo(points[0], points[1]) for (let i = 2; i < points.length; i += 2) { ctx.lineTo(points[i], points[i + 1]) } ctx.stroke() } <canvas id="canvas" style="transform: scale(2);"></canvas>