Javascript 反应：画布中的图像消失

我试图制作一个画布，其中应该显示一些文本和图像，但在网站加载后，图像在很短的时间内是可见的，它消失了。我在一些论坛上读到过关于这个问题的文章，通常情况下，解决方法似乎是先创建和镜像，然后加载源代码，然后在镜像中绘制。onload方法是正确的方法。但这对我还是不起作用：（有人能帮忙吗

function makeCanvas() {
        const canvas = canvasRef.current
        if (canvas) {
            canvas.width = 648;
            canvas.height = 480;

            makeContext(canvas);
        }
    }

    function makeContext(canvas) {
        const context = canvas.getContext('2d')

        var image = new Image()
        image.src = prevImagePathRef.current
        image.onload = function () {
            //context.clearRect(0, 0, context.canvas.width, context.canvas.height)
            //context.restore();
            context.drawImage(image, xPosImage, yPosImage, 100, 100);
            context.strokeStyle = "#000000";
            context.strokeRect(0, 0, canvas.width, canvas.height);

            context.fillStyle = backgroundColor
            context.fillRect(0, 0, canvas.width, canvas.height)
            
            context.font = fontSize + fontType;
            context.fillStyle = fontColor
            context.textAlign = "center"
            var list = createTextWithBreakLines(context, text, (canvas.width / 2))
            fillTextMultiLine(context, list, (canvas.width / 2), canvas.height)
            context.lineWidth = 2;
            context.save();
        }
 
    }

HTML代码：

<canvas ref={canvasRef} />