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