最直接判断canvas是否可渲染是检查dom中存在有效canvas元素且offsetwidth与offsetheight均大于0，并通过getcontext('2d')返回非null值确认2d上下文可用，再验证基础绘图api如fillrect是否可调用。
检查 canvas 元素是否存在且可渲染
最直接的判断方式是查 DOM 中是否有有效 canvas 元素，并确认它未被隐藏或禁用。仅靠 document.querySelector('canvas') 找到节点还不够——需进一步验证其上下文是否可用。
-
canvas元素必须已插入文档流，且offsetWidth与offsetHeight均大于 0（否则可能被display: none、visibility: hidden或宽高为 0 的 CSS 隐藏） - 调用
canvas.getContext('2d')返回非null才算真正支持 2D 渲染；若返回null，常见原因是 canvas 尚未 layout（如在display: none父容器内）或被浏览器策略限制（如某些 iframe 沙箱环境） - 对 WebGPU 或 WebGL 上下文，需分别检测
getContext('webgpu')或getContext('webgl')，但注意 WebGL 可能因驱动/安全策略被禁用，此时返回null是正常行为
用 getContext() 的返回值做兼容性兜底
getContext() 是识别 canvas 功能可用性的核心方法，它的返回值比元素存在与否更能反映真实绘图能力。
- 传入不支持的上下文类型（如旧版 Chrome 不支持
'webgpu'）会直接返回null，不会报错 - 即使上下文获取成功，也建议立即测试基础绘图操作是否生效，例如：
const ctx = canvas.getContext('2d'); if (ctx && typeof ctx.fillRect === 'function') { ctx.fillStyle = '#f00'; ctx.fillRect(0, 0, 1, 1); // 极小矩形避免性能开销 } - 某些 Android WebView 或 iOS Safari 在页面未完全激活时，
getContext('2d')可能暂时返回null，建议延迟到DOMContentLoaded或canvas元素onload后再尝试
区分「元素存在」和「绘图功能启用」
HTML5 规范中，canvas 是一个语义化占位元素，本身不自动启用绘图——功能依赖 JavaScript 初始化。很多误判源于混淆这两层。
- 服务端渲染或静态 HTML 中出现
<canvas></canvas>，不代表客户端能绘图；需确认 JS 已执行且未抛出异常 - 部分浏览器（如 IE9+）支持
canvas标签但不支持toDataURL()或getImageData()，这类 API 需单独检测：const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const supportsDataUrl = typeof canvas.toDataURL === 'function'; const supportsPixelAccess = typeof ctx.getImageData === 'function'; - 移动端 WebView 常因硬件加速关闭导致
getContext('2d')性能极差或部分 API 失效，不能只看返回值，还要结合ctx.canvas.width是否可读写来交叉验证
避免依赖全局特征检测库的陷阱
像 Modernizr 这类库的 canvas 检测项，实际只运行一次 getContext('2d') 并缓存结果。它无法捕获运行时动态变化（如用户禁用硬件加速、插件拦截 canvas API）。
立即学习“前端免费学习笔记（深入）”；
- 不要把
Modernizr.canvas当作实时状态——它只是页面加载初期的一次快照 - 若应用涉及 canvas 导出、滤镜或离屏渲染，应针对具体 API 单独检测，而非复用通用 canvas 支持标志
- 某些广告拦截插件或隐私扩展（如 CanvasBlocker）会主动覆盖
HTMLCanvasElement.prototype.getContext，使其始终返回null或伪造上下文，此时需结合ctx instanceof CanvasRenderingContext2D做二次校验
