Canvas绘制背景图报错：HTMLImageElement处于broken状态求助

问题现象 #

• Chrome浏览器抛出错误：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state
• 尝试添加image.onload后控制台无报错，但图片仍不显示，测试用console.log也无输出

原代码 #

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d')

canvas.width= 1024
canvas.height = 576

// 图片类
class Sprite {
    constructor({position}) {
        this.position = position
        this.image = new Image()
        this.image.src = 'B2.png'
    }  

    draw(){
            c.drawImage(this.image,this.position.x, this.position.y)
        }
}

const background = new Sprite({
    position:{
        x :0,
        y :0,
    }
})

// 调用draw的函数
function animate () {
    // 循环调用自身
    window.requestAnimationFrame(animate)
    c.fillStyle= 'white'
    c.fillRect(0, 0, canvas.width, canvas.height)
    background.draw()
    // 按住按键持续移动，否则停止
    player.velocity.x = 0
    if(keys.d.pressed) {
        player.velocity.x = 1
    }else if (keys.a.pressed) {
        player.velocity.x = -1
    }
    player.update()
    player2.update()
}

解决步骤 #

1. 修复图片加载逻辑 #

图片未加载完成就调用drawImage会触发报错，且src设置顺序错误可能导致缓存图片的onload不触发。修改Sprite类，添加加载状态标记，确保仅在图片加载完成后绘制：

class Sprite {
    constructor({position}) {
        this.position = position
        this.image = new Image()
        this.loaded = false // 标记图片是否加载完成

        // 先绑定加载完成回调
        this.image.onload = () => {
            this.loaded = true
            console.log('背景图加载完成')
        }

        // 添加加载失败回调，排查路径问题
        this.image.onerror = () => {
            console.error('背景图加载失败，请检查路径：B2.png')
        }

        // 最后设置图片src
        this.image.src = 'B2.png'
    }  

    draw(){
        // 仅当图片加载完成时执行绘制
        if(this.loaded) {
            c.drawImage(this.image, this.position.x, this.position.y)
        }
    }
}

2. 启动动画循环 #

原代码仅定义了animate函数但未调用，导致渲染逻辑完全没执行。在代码末尾添加：

// 启动动画
animate()

3. 验证图片路径正确性 #

• 确认B2.png与HTML文件在同一目录，或路径写为相对路径（如./assets/B2.png）
• 打开浏览器开发者工具的「Network」标签，查看图片请求状态，若为404则说明路径错误

修正后的完整代码示例 #

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d')

canvas.width= 1024
canvas.height = 576

class Sprite {
    constructor({position}) {
        this.position = position
        this.image = new Image()
        this.loaded = false

        this.image.onload = () => {
            this.loaded = true
            console.log('背景图加载完成')
        }

        this.image.onerror = () => {
            console.error('背景图加载失败，请检查路径：B2.png')
        }

        this.image.src = 'B2.png'
    }  

    draw(){
        if(this.loaded) {
            c.drawImage(this.image, this.position.x, this.position.y)
        }
    }
}

const background = new Sprite({
    position:{
        x :0,
        y :0,
    }
})

function animate () {
    window.requestAnimationFrame(animate)
    c.fillStyle= 'white'
    c.fillRect(0, 0, canvas.width, canvas.height)
    background.draw()
    
    player.velocity.x = 0
    if(keys.d.pressed) {
        player.velocity.x = 1
    }else if (keys.a.pressed) {
        player.velocity.x = -1
    }
    player.update()
    player2.update()
}

// 启动动画循环
animate()

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