It is very time-consuming to convert SVG to canvas in React!

handleSave = () => {
    const syncShow = "<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>";
    const ctx = document.getElementById("canvasId").getContext("2d");
    let img = new Image();
    img.src = "data:image/svg+xml;base64," + window.btoa(syncShow);
    ctx.drawImage(img, 0, 0);
   }
modify the canvas in the page
   <canvas id="canvasId"/>
Menu