用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();
</p>
