Canvas绘图层级问题：如何将drawImage图片设为背景让矩形在前景

Canvas 没有像 CSS 那样的 z-index 属性，它的显示层级完全由绘制顺序决定——后绘制的内容会覆盖先绘制的。

你现在的问题出在图片加载是异步操作：你先画了红色矩形，然后才发起图片加载，等图片加载完成执行drawBgImg的时候，矩形早就画好了，所以图片会盖在矩形上面。

要让图片当背景、矩形在前景，只需要调整绘制顺序：先加载并绘制图片，再绘制矩形。

修改后的代码如下：

<!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>Document</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
    }
</style>

<body>
    <canvas></canvas>
</body>
<script>
    var canvas = document.querySelector('canvas')
    canvas.width = 1920;
    canvas.height = 1080;

    var ctx = canvas.getContext('2d')

    initial();
    function initial() {
        let bgImg = new Image();
        bgImg.onload = function() {
            // 先画背景图
            ctx.drawImage(this, 0, 0, 60, 60);
            // 再画红色矩形
            ctx.fillStyle = 'red';
            ctx.rect(10, 10, 100, 100);
            ctx.fill();
        };
        bgImg.src = 'https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=';
    }
</script>

</html>

如果需要提前显示矩形（比如图片加载慢的时候先占位），可以先画矩形，等图片加载完成后重新绘制整个画布：先清屏，再画图片，最后再画矩形。示例代码如下：

<!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>Document</title>
</head>
<style>
    body {
        padding: 0;
        margin: 0;
    }
</style>

<body>
    <canvas></canvas>
</body>
<script>
    var canvas = document.querySelector('canvas')
    canvas.width = 1920;
    canvas.height = 1080;

    var ctx = canvas.getContext('2d')

    initial();
    function initial() {
        // 先画矩形占位
        drawRect();
        
        let bgImg = new Image();
        bgImg.onload = function() {
            // 清屏
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 画背景图
            ctx.drawImage(this, 0, 0, 60, 60);
            // 重新画矩形
            drawRect();
        };
        bgImg.src = 'https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=';
    }

    function drawRect() {
        ctx.fillStyle = 'red';
        ctx.rect(10, 10, 100, 100);
        ctx.fill();
    }
</script>

</html>

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