Unable to handle multiple images and texts on canvas

Questions
, , , , ,
1 


const [image, setImage] = useState("");
  const [imageWidth, setImageWidth] = useState(0);
  const HandleImageInput = (e) => {
    const reader = new FileReader();
    let imageUrl;
    reader.onload = () => {
      if (reader.readyState === 2) {
        imageUrl = reader.result;
        setImage(imageUrl);

        const imageEl = document.createElement("img");
        imageEl.src = imageUrl;
        imageEl.onload = () => {
          const aspectRatio = imageEl.width / imageEl.height;
          const newImageWidth = 120 * aspectRatio;
          setImageWidth(newImageWidth);
        };

        document.getElementById("my_modal_2").showModal();
      }
    };

    reader.readAsDataURL(e.target.files[0]);
  };

  function NewImage(props) {
    const [url] = useImage(image);

    return (
      <Image {...props} image={url} draggable width={imageWidth} height={150} />
    );
  }

  // Text Input

  const [text, setText] = useState("");
  const textInput = useRef();
  const HandleSubmitText = (e) => {
    e.preventDefault();
    const text = textInput.current.value;
    setText(text);
    document.getElementById("my_modal_2").showModal();
  };

  function NewText(props) {
    return (
      <Text
        {...props}
        text={text}
        draggable
        fontSize={konvaControls.textFontSize}
      />
    );
  }

returning:

                <NewImage
                  x={imageX}
                  y={imageY}
                  draggable
                  onDragEnd={(e) => {
                    setImageX(e.target.x()), setImageY(e.target.y());
                  }}
                />

                <NewText
                  x={textX}
                  y={textY}
                  fill={textColor}
                  onDragEnd={(e) => {
                    setTextX(e.target.x()), setTextY(e.target.y());
                  }}
                />
              </Layer>

In the above code I am unable to add multiple images onto the canvas, every time I add an image the texture is getting set with a new image, any fix?

2
  1. The snippet doesn’t hold sufficient info about what which component does. What is Layer? What is Text? Where is the canvas you’re mentioning?
  2. Please format your code (the </> icon above text area in discourse.)
3

I’m sorry for the inconvenience, I’m new to posting doubts on forums:

Layer is a dialog box which gets displayed on the when clicked on edit/ when added a new image this layer is applied as canvas; the svg image is a template which gets displayed on the layer for the reference of the user.

The issue is when i add an image onto the canvas I can drag the image and it gets displayed on the texture dynamically, but when I try to add a new Image the old image just gets replaced and i cannot handle multiple images as whenever a new image is added it gets replaced,

I’m seeking for a solution so that I can add multiple images onto my canvas so I can use it as my texture