画布元素在Firefox上无法正确显示

Question

我正在使用画布根据用户创建的角色显示故事的各个阶段。画布加载背景，然后在其顶部呈现用户创建的字符。以下是我用来绘制canvas元素的函数（我正在使用react）。它在chrome上可以正常工作，但在Firefox上不显示字符。我已经检查过以确保API能够提供所有正确的响应，因此图像请求不是问题。

这是我编写的用于加载图像然后渲染canvas元素的函数：

            const can0 = document.getElementById(props.id)
            const ctx0 = can0.getContext('2d', false)

            const bg = new Image()
            let bgLoaded = false
            const char = new Image()
            let charLoaded = false

            bg.src = 'http://localhost:4000/story/' + props.getStage + '/' + props.bg
            bg.onload = () => {
                bgLoaded = true
                can0.height = bg.height
                can0.width = bg.width
                if (charLoaded) {
                    ctx0.drawImage(bg, 0, 0, can0.width, can0.height)
                    ctx0.drawImage(char, can0.width / 2.5, can0.height / 2.2, char.width * 12, char.height * 12.1)
                }
            }
            char.src =
                'http://localhost:4000/character/' +
                con.getChar.gender +
                '/shihtzu/' +
                con.getChar.color +
                '/' +
                props.pose
            char.onload = () => {
                charLoaded = true
                if (bgLoaded) {
                    ctx0.drawImage(bg, 0, 0, can0.width, can0.height)
                    ctx0.drawImage(char, can0.width / 2.5, can0.height / 2.2, char.width * 12, char.height * 12.1)
                }
            }