HTML Canvas设置lineJoin="round"时箭头在部分角度下消失的原因

在Chrome浏览器中，当给Canvas 2D上下文设置ctx.lineJoin = "round"后，特定坐标下绘制的箭头会完全消失，Firefox中无此现象。

最小复现示例（MCVE） #

const canvas = document.getElementById('scene') as HTMLCanvasElement

// canvas sizing
const ctx = canvas.getContext('2d')
if (ctx === null) { console.error(`ctx is ${ctx}`); return }

canvas.width = 512
canvas.height = 512

let from = {x:317, y:166}
let to = {x:439, y:56}
let arrowHeadSize = 20
let arrowFinsAngle = Math.PI/6
let path = new Path2D()

// arrow body
path.moveTo(from.x, from.y)
path.lineTo(to.x, to.y)

// arrow head
let radians_to = Math.atan2(to.y - from.y, to.x - from.x)

path.moveTo(to.x, to.y);
path.lineTo(to.x - arrowHeadSize * Math.cos(radians_to - arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to - arrowFinsAngle));
path.moveTo(to.x, to.y);
path.lineTo(to.x - arrowHeadSize * Math.cos(radians_to + arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to + arrowFinsAngle));

path.closePath()

ctx.lineWidth = 4
ctx.strokeStyle = "white"
ctx.lineCap = "round"
ctx.lineJoin = "round" // 移除该行后恢复正常
ctx.stroke(path)

问题现象 #

问题原因 #

这是Chrome浏览器Canvas渲染引擎的已知bug：当路径中包含多条从同一点出发的短线条，且设置了round类型的lineJoin时，渲染逻辑会出现异常，导致整个路径被错误地隐藏。箭头的两个鳍条从尖端同一点出发，加上round lineJoin的计算逻辑，刚好触发了这个bug。

解决方案 #

这里提供几种可行的修复方式：

1. 拆分箭身与箭头路径，分别设置lineJoin

将箭身和箭头的路径分开绘制，箭身保留round lineJoin，箭头部分改用默认的miter或bevel类型，避免触发bug：

const canvas = document.getElementById('scene') as HTMLCanvasElement
const ctx = canvas.getContext('2d')
if (!ctx) { console.error('获取Canvas上下文失败'); return }

canvas.width = 512
canvas.height = 512

let from = {x:317, y:166}
let to = {x:439, y:56}
let arrowHeadSize = 20
let arrowFinsAngle = Math.PI/6

// 绘制箭身
const bodyPath = new Path2D()
bodyPath.moveTo(from.x, from.y)
bodyPath.lineTo(to.x, to.y)

ctx.lineWidth = 4
ctx.strokeStyle = "white"
ctx.lineCap = "round"
ctx.lineJoin = "round"
ctx.stroke(bodyPath)

// 绘制箭头，改用miter lineJoin
const headPath = new Path2D()
const radians_to = Math.atan2(to.y - from.y, to.x - from.x)
headPath.moveTo(to.x, to.y);
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to - arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to - arrowFinsAngle));
headPath.moveTo(to.x, to.y);
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to + arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to + arrowFinsAngle));

ctx.lineJoin = "miter"
ctx.stroke(headPath)

2. 给箭头尖端添加极小偏移

让箭头鳍条的起点稍微偏离尖端，避免完全从同一点出发，绕过bug：

// 修改箭头绘制部分的代码
const offset = 0.001 // 极小偏移，视觉上无影响
headPath.moveTo(to.x + offset, to.y + offset);
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to - arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to - arrowFinsAngle));
headPath.moveTo(to.x - offset, to.y - offset);
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to + arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to + arrowFinsAngle));

3. 改用填充方式绘制箭头

将箭头部分改为闭合路径后填充，不受lineJoin设置的影响：

// 绘制箭头的代码改为：
const headPath = new Path2D()
const radians_to = Math.atan2(to.y - from.y, to.x - from.x)
headPath.moveTo(to.x, to.y);
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to - arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to - arrowFinsAngle));
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to), to.y - arrowHeadSize * Math.sin(radians_to));
headPath.lineTo(to.x - arrowHeadSize * Math.cos(radians_to + arrowFinsAngle), to.y - arrowHeadSize * Math.sin(radians_to + arrowFinsAngle));
headPath.closePath();

ctx.fillStyle = "white"
ctx.fill(headPath)

内容的提问来源于stack exchange，提问作者Manik