JS操作canvas绘制字符效果时报TypeError: drCtx is null错误如何解决

问题原因 #

HTMLCanvasElement.getContext() 方法的参数是大小写敏感的，你代码中写的 getContext("2D") 为错误写法，大写的 2D 无法被浏览器识别，会返回 null，因此全局变量 drCtx 被赋值为 null，后续在 renderDR 函数中调用 drCtx.fillStyle 等属性时就触发了空类型报错。

解决方法 #

将 init 函数里的

drCtx = canvasElement.getContext("2D");

修改为

drCtx = canvasElement.getContext("2d");

即可解决报错问题。

额外优化建议 #

• 可增加非空判断避免异常场景报错：

function init(){
    var canvasElement = document.getElementById("test");
    if (!canvasElement) return
    drCtx = canvasElement.getContext("2d");
    if (!drCtx) return
    // 剩余原有逻辑不变
}

• Canvas fillText 默认的文本基线是 alphabetic，当前代码渲染的字符会出现顶部裁切问题，可在设置填充样式后加一句 drCtx.textBaseline = "top"，让字符从坐标顶部开始渲染，显示效果更完整。

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