DrawImg function put the previous img on canvas

Question

hi I build a Drawing App that when you draw something on it you can choose suggestion picture to add it in canvas . But there is a problem , for example I have three suggested Image ,when user click on #img1 nothing happen , if continue to drawing and for second time click on #img2 ,#img1 is place on the canvas .Since I am sure that the problem is with the DrawPicture function(the function that contains drawimg), I will put the related codes here so that you can debug it more easily.

my Three img and canvas Code :

<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>

my functions codes :

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 that variable There are variable that I already received .

Answer 1

you can use this cheat code and with double click put the current img on canvas

setCountClick(CountClick + 1); // it's a state i decleard it with useState

    var Se_image = new Image();
  
    Se_image.src = ImgSRC;


    Se_image.onload = function () {
      if (CountClick === 2) {
    ctxRef.current.drawImage(Se_image, POx1, POY1, widthSize, heightSize);

setCountClick(1)