hola, construí una aplicación de dibujo que cuando dibujas algo en ella puedes elegir una imagen de sugerencia para agregarla en el lienzo. Pero hay un problema, por ejemplo, tengo tres imágenes sugeridas, cuando el usuario hace clic en #img1, no sucede nada, si continúa dibujando y por segunda vez hace clic en #img2, #img1 se coloca en el lienzo. Dado que estoy seguro de que el El problema es con la función DrawPicture (la función que contiene drawimg), pondré los códigos relacionados aquí para que puedas depurarlo más fácilmente.

mi Tres img y lienzo Código:

 <div> <img id={"img1"} src={Butterfly} onClick={ (event) => { takePicture(event); DrawPicture(); setPointsId(elements.length) } } style={{ cursor: "pointer" }} alt={"Img1"} /> <img id={"img2"} src={Butterfly2} onClick={ (event) => { takePicture(event); DrawPicture(); setPointsId(elements.length) } } style={{ cursor: "pointer" }} alt={"Img2"} /> <img id={"img3"} src={Butterfly3} onClick={ (event) => { takePicture(event); DrawPicture(); setPointsId(elements.length) } } style={{ cursor: "pointer" }} alt={"img3"} /> </div> <canvas onMouseDown={startDrawing} onMouseUp={endDrawing} onMouseMove={draw} onMouseLeave={endDrawing} ref={canvasRef} width={width} height={window.innerHeight} /> </div>

Mis códigos de funciones:

 function takePicture(event) { setImgSRC(event.target.src); } function DrawPicture() { var Se_image = new Image(); Se_image.onload = start; Se_image.src = ImgSRC; Se_image.onerror = function(){ alert(Se_image.src+"failed to load") } function start() { ctxRef.current.drawImage(Se_image, POx1, POY1, widthSize, heightSize); } }

the POx1, POY1, widthSize, heightSize esa variable Hay variables que ya recibí.