Safari不支持HTMLCanvasElement上下文事件：是否不会丢失上下文？如何处理？

Safari（包括移动端）虽然不支持HTMLCanvasElement.contextlost和HTMLCanvasElement.contextrestored事件，但Canvas上下文依然可能丢失——比如系统内存不足、页面被后台挂起后恢复，或是浏览器资源回收时，都可能出现这种情况，只是Safari没有提供对应的事件通知开发者。

一、定期检测上下文有效性 #

由于没有事件通知，只能主动检测上下文是否正常工作。可以通过尝试绘制小图形并读取像素的方式验证：

function isContextValid(ctx) {
  try {
    // 绘制一个1x1的黑色像素
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, 1, 1);
    // 读取像素数据验证
    const pixelData = ctx.getImageData(0, 0, 1, 1).data;
    return pixelData[0] === 0 && pixelData[1] === 0 && pixelData[2] === 0 && pixelData[3] === 255;
  } catch (err) {
    // 抛出异常说明上下文已失效
    return false;
  }
}

可以把这个检测逻辑加入动画循环（requestAnimationFrame回调），或是在用户交互、页面恢复可见时触发。

二、监听页面状态变化 #

针对页面后台挂起、恢复的场景，利用页面可见性事件触发检查：

• 监听visibilitychange事件，处理页面从隐藏到可见的切换：

  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      checkAndRestoreCanvas();
    }
  });
  

• 移动端Safari可额外监听pageshow事件，处理页面从浏览器缓存恢复的情况：

  window.addEventListener('pageshow', (e) => {
    if (e.persisted) { // 页面从缓存恢复
      checkAndRestoreCanvas();
    }
  });
  

三、封装上下文重建逻辑 #

提前把Canvas的初始化、内容绘制逻辑封装成可复用函数，一旦检测到上下文失效，就重建上下文并恢复内容：

// 假设canvas是目标画布元素，redrawAllContent是自定义的重绘函数
function checkAndRestoreCanvas() {
  const canvas = document.getElementById('target-canvas');
  const ctx = canvas.getContext('2d');
  
  if (!isContextValid(ctx)) {
    // 销毁旧上下文（部分浏览器需重置尺寸触发）
    canvas.width = canvas.offsetWidth;
    canvas.height = canvas.offsetHeight;
    const newCtx = canvas.getContext('2d');
    // 重绘所有内容
    redrawAllContent(newCtx);
  }
}

// 示例重绘函数，需根据实际业务实现
function redrawAllContent(ctx) {
  // 恢复之前的绘制状态：比如填充背景、绘制图形、加载图像等
  ctx.fillStyle = '#fff';
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  // ...其他绘制逻辑
}

关键提示：要提前保存绘制所需的状态（如图形参数、图像资源引用、图层数据等），避免重建后内容丢失。

四、优化内存占用 #

Safari对内存管控严格，减少内存压力能降低上下文丢失的概率：

• 避免创建超出显示需求的大尺寸Canvas；
• 及时清理不再使用的Image对象、路径、渐变等资源；
• 处理图像时优先使用canvas.toBlob()替代getImageData()，减少内存拷贝。

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