如何通过 ResizeObserver 解决动态字体大小调整引起的 Canvas 绘图模糊与坐标偏移

用ResizeObserver解决Canvas模糊与偏移的核心是同步更新canvas的width/height属性和ctx.scale：当字体缩放导致容器尺寸变化时，需按devicePixelRatio重设像素尺寸并缩放坐标系，再重绘内容。

用 ResizeObserver 解决动态字体大小调整引发的 Canvas 模糊与坐标偏移，核心在于：当字体缩放改变画布显示尺寸时，必须同步更新 canvas 的 实际像素尺寸（width/height 属性） 和 2D 上下文的坐标系缩放（ctx.scale），否则逻辑坐标、CSS 像素、物理像素三者脱节，必然导致模糊和定位漂移。

为什么动态字体大小会触发 Canvas 问题

页面中若通过 CSS 变量、rem/em 单位或 JS 动态修改根字体大小（html { font-size: ... }），常会间接影响 canvas 容器的 offsetWidth/offsetHeight（比如容器宽高设为 100vw 或 50rem）。一旦容器尺寸变化，而 canvas 的 width/height 属性未同步更新，浏览器就会对 canvas 进行隐式 CSS 缩放 —— 此时所有 fillText、strokeRect 等绘制都按旧分辨率计算，再被拉伸渲染，结果就是文字发虚、线条变粗、鼠标点击位置错位。

用 ResizeObserver 监听并重置 Canvas 尺寸

ResizeObserver 能精准捕获元素尺寸变化（包括因 font-size 改变引起的布局重排），比 window.resize 更可靠、无抖动。关键步骤如下：

• 监听 canvas 的父容器（推荐），而非 canvas 自身 —— 因为 canvas 的 offsetWidth 在 CSS 缩放下可能失真，而父容器尺寸更稳定
• 获取当前容器的 offsetWidth 和 offsetHeight
• 读取 window.devicePixelRatio，计算高分屏所需的实际像素尺寸
• 同时更新：canvas.width = container.offsetWidth * dpr，canvas.height = container.offsetHeight * dpr
• 调用 ctx.scale(dpr, dpr)，使后续绘图坐标仍按 CSS 像素书写（如 fillText('A', 20, 40)）
• 清空画布并重绘全部内容（含文字、图形、检测框等）

字体缩放时保持文本清晰的关键细节

即使做了 DPR 适配，动态字体大小还可能让 fillText 出现亚像素模糊。需额外处理：

• 避免直接用 rem/em 计算文本坐标 —— 先统一转为 px 值再乘以 DPR，例如：const fontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize) * 1.5;
• 确保 ctx.font 中的字号是整数像素值（如 '24px sans-serif'），非小数（如 '24.3px'）
• 对齐文本基线：设置 ctx.textBaseline = 'top' 或 'middle'，并用 Math.round() 对齐 x/y 坐标，防止文字边缘落在物理像素中间
• 必要时启用抗锯齿控制：ctx.imageSmoothingEnabled = false（对 bitmap 字体有效），或使用 ctx.webkitImageSmoothingEnabled = false

完整示例代码结构

以下为可直接集成的轻量逻辑：

const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const container = canvas.parentElement;const dpr = window.devicePixelRatio || 1;<p>const resizeHandler = () => {const w = container.offsetWidth;const h = container.offsetHeight;</p><p>canvas.width = w <em> dpr;canvas.height = h </em> dpr;canvas.style.width = w + 'px';canvas.style.height = h + 'px';</p><p>ctx.scale(dpr, dpr);ctx.clearRect(0, 0, w, h);</p><p>// 重绘逻辑（此处放入你的 drawText / drawRect 等）redraw();};</p><p>const ro = new ResizeObserver(resizeHandler);ro.observe(container);</p><p>// 初始执行一次resizeHandler();