Estoy tratando de crear un lienzo en reaccionar en el que se pueda dibujar. Para el lienzo, quiero tener una imagen llamada Dogimage en la que se dibuje, esta imagen se almacena en otra carpeta en mi directorio con la ruta ../../images/dog-without-labels.png . Ya tengo el dibujo funcionando, pero parece que no puedo cargar la imagen en el lienzo porque no aparece nada en el lienzo.

este es algo de mi codigo

 import React, { useEffect, useRef, useState } from "react"; function DrawCanvas() { const canvasRef = useRef(null) const contextRef = useRef(null) const [isDrawing, setIsDrawing] = useState(false) const [image, setImage] = useState(null) useEffect(() => { const canvas = canvasRef.current; canvas.width = window.innerWidth/1.5 ; canvas.height = window.innerHeight/1.5 ; canvas.style.width = `${window.innerWidth/3}px`; canvas.style.height = `${window.innerHeight/3}px`; const context = canvas.getContext("2d") context.scale(2,2) context.lineCap = "round" context.lineWidth = 3 context.strokeStyle = "black" //const image = new Image(); const Dogimage = document.createElement('img'); Dogimage.src = '../../images/dog-without-labels.png' Dogimage.onload = () => setImage(Dogimage) context.drawImage(Dogimage, 0, 0,400,256+80); contextRef.current = context }, [])

¿Algún consejo sobre cómo puedo cargar la imagen en el lienzo?