how to give transparent canva background to excalidraw

Question

I am trying to use excalidraw to annotate on a web page. I am trying to embed excalidraw on top of existing HTML and make a background of canva as transparent so that when i draw on excalidraw to user it will be like annotating html

My white board component

import { Excalidraw } from "@excalidraw/excalidraw";

const WhiteBoard = () => {
  // const excalidrawRef = useRef(null);
  const src =
    "https://acc-42119.ispring.com/s/embed_player/fa7aaa7e-cca4-11ee-8c91-061b8139f7b2";
  const options = {
    zenModeEnabled: true,
    viewBackgroundColor: "#000000",
    backgroundColor: "transparent",
  };
  const excalidrawRef = useRef(null);
  useEffect(() => {
    if (excalidrawRef.current) {
      const sceneData = {
        elements: [], // Initialize with no elements
        appState: {
          ...Excalidraw.defaultAppState,
          backgroundColor: "transparent", // Set the canvas background color to transparent
        },
      };
      excalidrawRef.current.updateScene(sceneData);
    }
  }, [excalidrawRef]);
  return (
    <>
      <h1 style={{ textAlign: "center" }}>Excalidraw Example</h1>
      <div style={{ height: "500px", position: "relative" }}>
        <div className="white_board_container">
          <Excalidraw
            ref={excalidrawRef}
            style={{ backgroundColor: "transparent" }}
            options={options}
          />
        </div>
        <div className="ppt_container">
          <iframe
            id="i_frame"
            src={src}
            width="560"
            height="315"
            frameBorder="0"
            border="0"
            scrolling="auto"
            allowtransparency="true"
            allowFullScreen="1"
            style={{ border: "none", backgroundColor: "transparent" }}
          ></iframe>
        </div>
      </div>
    </>
  );
};

export default WhiteBoard;

Working Example - https://codesandbox.io/p/sandbox/excalidraw-annotation-qcrtnq?file=%2Fsrc%2FWhiteBoard.js

Edit 1

Did some more research on how make canva transparent How do I make a transparent canvas in html5? Above answer suggest to use

context.clearRect(0, 0, canvas.width, canvas.height);

Which clears even drawing but i want to draw on transparent white board

Edit 2

tried using globalAlpha property but it adds transparency on drawing on canvas, i need the canvas to be transparent