Django堆叠Canvas问题：去除不必要滚动条、灰色边框及实现窗口居中

问题修复方案 #

你遇到的三个问题核心原因是：绝对定位的canvas元素脱离文档流，导致父容器#stack没有宽高，加上浏览器默认样式没有重置，才出现滚动条、边框、无法居中的问题，以下是完整修改方案：

1. CSS代码修改（核心修复） #

/* 全局重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  /* 移除多余滚动条 */
  overflow: hidden;
  /* 实现canvas组全屏居中 */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#stack {
  position: relative;
}
#stack canvas {
  display: block;
  /* 彻底移除边框类样式 */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#stack #canvas {
  /* 下层canvas用相对定位，撑起父容器宽高 */
  position: relative;
}
#stack #canvas2 {
  /* 上层canvas绝对定位，和下层完全对齐 */
  position: absolute;
  top: 0;
  left: 0;
}

2. 可选JS优化（避免图片加载异常导致的尺寸问题） #

如果存在canvas尺寸偶尔为0的情况，可以把原JS的逻辑绑定到图片加载完成事件，替换原window.onload逻辑：

window.onload = function() {
    var canvas = document.getElementById('canvas');
    var ctxB = canvas.getContext('2d');
    var canvas2 = document.getElementById('canvas2');
    var ctxT = canvas2.getContext('2d');
    var waterfall = document.getElementById('waterfall');

    // 确保图片加载完成再计算尺寸
    waterfall.onload = function() {
        canvas.width = canvas2.width = .25*waterfall.width;
        canvas.height = canvas2.height = .25*waterfall.height;
        ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);
        ctxT.fillStyle = "white";
        ctxT.fillRect(0, 0, canvas2.width, canvas2.height);
    }

    canvas2.addEventListener('mousemove', event => {
        var x = event.offsetX;
        var y = event.offsetY;  
        const eraseSize = 100;
        ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);
    })
}

HTML代码不需要修改。

问题对应解决说明 #

• 滚动条：全局重置了body的默认边距，添加overflow: hidden直接屏蔽视口外多余内容
• 浅灰色边框：显式移除canvas的所有边框、轮廓、阴影属性，同时强制两层canvas通过top:0;left:0完全对齐，不会出现错位漏出背景的伪边框问题
• 居中对齐：body使用flex布局占满整个视口，下层canvas用相对定位撑起父容器尺寸，flex会直接将整个canvas组居中到屏幕中央

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