HTML Canvas元素不显示，引入Canvas标签后页面所有内容消失

问题原因 #

1. 脚本执行时机错误（最高概率） #

你把<script src="main.js"></script>放在了<body>标签之前，浏览器会同步加载执行该脚本，此时body内的canvas元素还未被解析，main.js中如果直接获取#mycanvas元素会拿到null，后续调用getContext()、drawImage()等方法时会抛出未捕获的类型错误，阻塞整个页面的渲染。删除canvas标签后，JS代码不会触发报错逻辑，页面内容就可以正常显示。

2. CSS层级覆盖 #

你给canvas设置了832px*672px的尺寸，如果CSS中给canvas设置了position: fixed/absolute且未指定z-index，canvas会默认覆盖在后续的按钮、文本元素上方，视觉上呈现为所有内容都未渲染。

3. HTML语法不规范 #

你将<link rel="stylesheet">和<script>标签放在了</head>和<body>之间，不属于合法的DOM节点位置，浏览器解析DOM树时可能出现异常，导致后续内容渲染失败。

解决方案 #

1. 首先修正HTML结构，调整样式表和脚本的位置，同时给canvas标签添加原生宽高属性，避免后续绘制32*32素材时出现拉伸模糊：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inversion</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="button" onclick="loadlevel()" id="levelsel">
    <canvas id="mycanvas" width="832" height="672"></canvas>
    <div id="message"> Hi </div>
    <script src="main.js"></script>
</body>
</html>

canvas标签的width/height属性对应绘图缓冲区的实际像素尺寸，832px刚好对应26个32px宽度的素材，672px刚好对应21个32px高度的素材，和你要做的游戏地图需求完全匹配。

2. 排查JS报错：打开Chrome开发者工具（F12）切换到Console面板，刷新页面查看是否有红色报错。如果存在获取canvas元素相关的报错，可将main.js中所有操作DOM、canvas的代码包裹在DOM加载完成的回调中：

document.addEventListener('DOMContentLoaded', function() {
    // 原有canvas操作逻辑放在此处
    const canvas = document.getElementById('mycanvas');
    const ctx = canvas.getContext('2d');
})

3. 排查CSS覆盖问题：给canvas临时添加background: #cccccc;的样式，同时给按钮和message div添加position: relative; z-index: 10;的样式，如果刷新后可以看到按钮和文字浮在canvas上方，调整对应元素的层级和定位规则即可。

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