Draw directly on an image in Svelte

I have an application that presents images. I need to let the user to click the image and to mark the specific place where they clicked.

Below listed a simple example of the current code. Clicking the image shows the relative coordinates of the click to image, i.e., as if the top-left corner of the image is the (0, 0).

<script lang="ts">    const image = `https://raw.githubusercontent.com/lieldvd/mturk/main/15545/frame_0.jpg`;    let topLeftP = {x: 0, y: 0};    let mouseClickP = {x: 0, y: 0};    const imageDimensions = {w: 1280, h: 640};    function handleMousemove(event){        var videoElement = document.getElementsByClassName("image")[0].getBoundingClientRect();        topLeftP.x = videoElement.left        topLeftP.y = videoElement.top        mouseClickP.x = event.clientX - topLeftP.x;        mouseClickP.y = event.clientY - topLeftP.y;    }</script><main><!-- svelte-ignore a11y-click-events-have-key-events --><img         id="imageCanvas"        class="image"        src={image}         alt='Blank'        on:click|preventDefault={(e)=>handleMousemove(e)}    /><div>The mouse position is ({mouseClickP.x}, {mouseClickP.y})</div></main><style>    main {        text-align: center;        padding: 1em;        max-width: 240px;        margin: 0 auto;    }    h1 {        color: #ff3e00;        text-transform: uppercase;        font-size: 4em;        font-weight: 100;    }    @media (min-width: 640px) {        main {            max-width: none;        }    }</style>

I need to mark the point clicked with a red dot, so that it will be seen with a naked eye.

I saw this answer, but it uses a canvas which I could not understand how to make it work with an image, as I need the point to appear directly on the image itself.