Canvas渲染不一致的首要原因是getContext返回null，需每次调用后判断；其次需按devicePixelRatio缩放canvas宽高并缩放坐标系；toDataURL MIME类型需运行时探测并降级；WebGL着色器须检查编译与链接状态，注意语法和驱动兼容性。
Canvas 渲染不一致，先查 getContext 返回值是否为 null
很多“图形显示错位”“画布空白”问题，根本不是绘图逻辑错了，而是 getContext('2d') 或 getContext('webgl') 直接返回 null —— 浏览器压根没启用对应上下文。比如旧版 Safari 不支持 webgl2，IE 完全不支持 webgl，而某些企业内网环境会禁用硬件加速，导致 getContext('2d') 失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次调用
getContext后立刻加判断：if (!ctx) { console.warn('Canvas context not available'); return; } - 不要只测 Chrome，至少在 Safari（macOS/iOS）、Firefox、Edge（Chromium 内核）里手动触发一次
getContext并打印结果 - 移动端需注意：iOS Safari 在页面未完全可见时（如 tab 切换中）可能延迟初始化
canvas，offsetWidth/offsetHeight为 0 也会让getContext失效
Canvas 像素比（window.devicePixelRatio）不处理，图形必然模糊或缩放异常
高分屏下，CSS 像素和物理像素不是 1:1。Canvas 默认按 CSS 像素渲染，但绘制时若没按 devicePixelRatio 缩放画布的 width/height 属性，就会出现模糊、线条发虚、文字锯齿等问题——这不是抗锯齿开关能解决的，是底层像素对不上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置 canvas 实际分辨率时，必须同时改
canvas.width和canvas.height（DOM 属性），而不是只改 CSS 样式 - 缩放系数要取整：
const dpr = Math.round(window.devicePixelRatio || 1); canvas.width = width * dpr; canvas.height = height * dpr; - 绘图前别忘缩放坐标系：
ctx.scale(dpr, dpr)，否则所有fillRect、drawImage都会偏移 - 监听
resize和orientationchange，部分安卓机横竖屏切换时devicePixelRatio会变
不同浏览器对 canvas.toDataURL 的 MIME 类型支持不一致
toDataURL('image/webp') 在 Safari 14.1 之前完全不支持，Firefox 对 image/avif 支持更晚；即使同是 image/png，Chrome 可能默认带 alpha 通道，Safari 在某些模式下会强制转成 RGB（丢弃透明度）。导出图片“看起来少了一块”往往就卡在这儿。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 导出前先探测支持性：
canvas.toDataURL('image/webp').startsWith('data:image/webp')是最轻量的运行时判断方式 - 不要硬写
'image/webp'，优先 fallback 到'image/png'，再 fallback 到'image/jpeg'（注意 JPEG 不支持透明） - 涉及用户下载时，用
canvas.toBlob替代toDataURL，避免 base64 编码膨胀和内存峰值 - 服务端接收前，前端最好加个
console.log('export format:', mimeType, 'size:', blob?.size)，方便对比各端实际产出
WebGL 着色器编译失败在不同浏览器报错位置完全不同
Chrome 报错指向 gl.getShaderInfoLog 的第 12 行，Firefox 可能说“语法错误在第 1 行”，Safari 则干脆静默失败——因为各家 WebGL 实现对 GLSL ES 1.0/3.0 的解析严格度不同，比如 precision mediump float; 在 Safari 中若漏写，可能不报错但结果全黑；而 Chrome 会直接中断编译。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写完 shader 必须调用
gl.getShaderParameter(shader, gl.COMPILE_STATUS)，不能只看控制台有没有红字 - 所有
#version指令必须顶格、无空格、无 BOM，且和目标上下文匹配（webgl→#version 100，webgl2→#version 300 es） - 避免使用
texture2D这类已废弃函数，WebGL2 下必须用texture；Safari 对flat修饰符支持滞后，早期版本会忽略它导致插值异常 - 用
gl.getProgramInfoLog(program)查链接错误，它和编译错误是两回事，容易漏查
最麻烦的不是语法差异，而是某些 GPU 驱动在特定浏览器里会把合法 GLSL 优化成非法指令——这种问题只能靠真机+真实显卡组合排查，模拟器和远程调试器基本没用。
