Canvas中drawLine函数无法正常绘制的问题排查求助

我正处于Canvas绘图学习入门阶段，当前代码中仅drawLine函数（对应pencil模式）无法在Canvas上绘制线条或点，该函数本应在onMove事件触发时执行。已经尝试过调试代码、咨询相关渠道，但问题仍未解决，现附上完整的代码文件，请求帮忙分析原因。

服务代码 #

// 请粘贴你的Canvas服务代码

控制器代码 #

// 请粘贴你的控制器代码

HTML代码 #

<!-- 请粘贴你的HTML代码 -->

可能的排查方向 #

• 验证onMove事件是否正确绑定到Canvas元素，鼠标/触摸移动时是否能触发该事件（可通过console.log在事件回调中打印日志确认）
• 检查drawLine函数内是否正确获取了Canvas的2D上下文：const ctx = canvas.getContext('2d')，确保ctx不为null或undefined
• 确认绘图坐标是否正确：需将页面全局坐标转换为Canvas自身的相对坐标（可通过canvas.getBoundingClientRect()计算偏移量）
• 检查绘图流程是否完整：drawLine中是否调用了beginPath()、moveTo()、lineTo()，最后是否执行了stroke()完成绘制
• 核实pencil模式的切换逻辑：确认仅在pencil模式激活时，onMove才会调用drawLine函数
• 检查Canvas尺寸设置：避免CSS设置的宽高与Canvas自身的width/height属性不一致，导致坐标缩放偏差

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