HTML Canvas全屏问题求助：Carrom游戏绘图错乱

• 同步Canvas的实际尺寸与显示尺寸
  Canvas有两个核心尺寸：元素自身的width/height属性（决定绘图缓冲区的像素大小），以及CSS设置的width/height（决定页面上的显示大小）。全屏切换时如果只修改CSS尺寸、未同步更新属性值，会直接导致绘制内容拉伸、错位。要在全屏状态变化时监听事件，同步两者并重新绘制：

  function resizeCanvas() {
    const canvas = document.getElementById('your-canvas-id');
    // 匹配显示区域的实际像素尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    // 重新渲染棋盘
    drawCarromBoard();
  }
  
  // 监听全屏切换事件
  document.addEventListener('fullscreenchange', resizeCanvas);
  // 同时监听窗口缩放，适配普通窗口尺寸变化
  window.addEventListener('resize', resizeCanvas);
  

• 适配比例的棋盘绘制逻辑
  全屏后窗口宽高比会变化，要保证棋盘按原比例显示、避免变形。可以以窗口较短边为基准计算缩放比例，同时让棋盘居中：

  function drawCarromBoard() {
    const canvas = document.getElementById('your-canvas-id');
    const ctx = canvas.getContext('2d');
    // 取窗口短边的90%作为棋盘显示尺寸，留边距避免贴边
    const boardDisplaySize = Math.min(canvas.width, canvas.height) * 0.9;
    const xOffset = (canvas.width - boardDisplaySize) / 2;
    const yOffset = (canvas.height - boardDisplaySize) / 2;
    // 假设你设计的原始棋盘尺寸为800x800，可替换为实际值
    const originalBoardSize = 800;
    const scaleRatio = boardDisplaySize / originalBoardSize;
  
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 保存当前绘图上下文状态
    ctx.save();
    // 平移到居中位置
    ctx.translate(xOffset, yOffset);
    // 按比例缩放绘图坐标系
    ctx.scale(scaleRatio, scaleRatio);
    
    // 这里执行你的棋盘绘制逻辑，比如绘制边框、圆心等
    // drawBoardBorder();
    // drawCenterCircle();
  
    // 恢复上下文初始状态
    ctx.restore();
  }
  

• 处理F11全屏的延迟问题
  部分浏览器在F11触发全屏时，窗口尺寸的更新会有短暂延迟，导致直接获取的尺寸不准确。可以给resize操作加个短延迟：

  document.addEventListener('fullscreenchange', () => {
    setTimeout(resizeCanvas, 100);
  });
  

• 排查硬编码的固定坐标
  如果绘制代码里用了固定像素值（比如ctx.fillRect(50, 50, 100, 100)），全屏后这些固定坐标会偏离预期位置。要把所有绘制坐标改成基于Canvas当前尺寸的相对计算值。

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