Canvas drawImage绘图在部分设备偏移至左上角问题求解

• 异常仅出现在少量设备上的核心原因是高DPI屏幕的设备像素比兼容缺失：出问题的设备均为设备像素比（devicePixelRatio，以下简称DPR）≥2的高清屏，这类设备上Canvas存在「CSS逻辑尺寸」和「实际渲染像素尺寸」两个维度的参数，如果初始化Canvas时没有做DPR适配，当WebGL导出的截图分辨率按物理像素生成时，直接绘制就会出现图像仅占左上角1/(DPR²)区域的现象——你遇到的仅占第一象限（1/4画布）的表现，完全对应DPR=2设备的典型故障特征。
• 现有代码存在两个会放大兼容性问题的隐患：
  • 赋值图片源时写的是model.toDataURL而非model.toDataURL()，直接引用了函数对象而非调用方法拿到结果。部分3D渲染库对toDataURL做了getter劫持，所以多数设备上能正常拿到图片地址，但在WebGL实现更严格的设备上会返回异常值。
  • 在图片加载完成前提前给Image对象设置width/height属性，会干扰部分浏览器对图片原始分辨率（naturalWidth/naturalHeight）的读取，导致drawImage的自动缩放计算出错。
• 现有drawImage调用只传了目标尺寸，没有指定源图像的裁切范围，浏览器会按自身默认逻辑计算源图绘制区域，不同设备的实现存在差异。

按以下步骤调整即可全设备兼容，不需要修改你现有200×200坐标系下的点位绘制逻辑：

1. 初始化Canvas时先做DPI适配，统一逻辑坐标和物理像素的映射关系
2. 修正Image对象的赋值逻辑，不要提前强制设置图片的宽高属性
3. 调用drawImage时明确指定源图裁切范围和目标绘制范围，不依赖浏览器的默认缩放逻辑

完整修复代码：

// 替换为你实际的Canvas元素获取逻辑
const footCanvas = document.querySelector('#foot-canvas');
const ctx = footCanvas.getContext('2d');
const DPR = window.devicePixelRatio || 1;
const CANVAS_LOGIC_SIZE = 200; // 业务要求的200×200逻辑尺寸

// —— 核心适配：区分Canvas的物理像素尺寸和CSS逻辑尺寸 ——
// 设置Canvas实际渲染的后备存储尺寸（物理像素）
footCanvas.width = CANVAS_LOGIC_SIZE * DPR;
footCanvas.height = CANVAS_LOGIC_SIZE * DPR;
// 设置Canvas在页面上的显示尺寸（CSS逻辑像素）
footCanvas.style.width = `${CANVAS_LOGIC_SIZE}px`;
footCanvas.style.height = `${CANVAS_LOGIC_SIZE}px`;
// 缩放上下文，后续所有绘制操作直接用200×200的逻辑坐标即可，无需换算DPR
ctx.scale(DPR, DPR);

// —— 修正截图加载绘制逻辑 ——
const captureImg = new Image();
// 确保toDataURL是方法调用，兼容不同3D库的导出写法
captureImg.src = typeof model.toDataURL === 'function' 
  ? model.toDataURL() 
  : model.toDataURL;

captureImg.onload = function () {
  // 绘制前清空画布
  ctx.clearRect(0, 0, CANVAS_LOGIC_SIZE, CANVAS_LOGIC_SIZE);
  // 全量绘制源图到200×200的逻辑区域，明确传参避免浏览器计算偏差
  ctx.drawImage(
    captureImg,
    0, 0, captureImg.naturalWidth, captureImg.naturalHeight, // 取源图全部内容
    0, 0, CANVAS_LOGIC_SIZE, CANVAS_LOGIC_SIZE // 铺满整个Canvas的逻辑区域
  );

  // 你原有的点位绘制逻辑保持不变即可，坐标体系完全匹配200×200尺寸
}

• 如果你使用的3D模型渲染库支持配置导出截图的分辨率，可直接将导出分辨率设置为200 * DPR，能减少drawImage时的缩放损耗，显示效果更锐利
• 该适配方案兼容所有DPR等级的设备（包括DPR=1的普通屏、DPR=2/3的高清屏），不会影响正常设备的现有显示效果

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