How to draw coordinates and line on only picture part, not whole svg ( just one part of svg)

GoJS
1

unable to draw coordinates and line on only picture part, not whole canvas (just one part of canvas)

similar to this Draw points on canvas with image - JSFiddle - Code Playground

I have did like this in my react app


const drawCoordinates = (x, y) => {
      const pointSize = 4;
      const ctx = document
        .getElementsByClassName('svg-diagram-component')[0]
        .getElementsByTagName('canvas')[0]
        .getContext('2d');

      ctx.fillStyle = '#ff2626'; // Red color
      ctx.beginPath();
      ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
      ctx.fill();
};

`and call above function below on click of image`

$(go.Picture, BoatSvg, {
          // $(go.Picture, ships[randomImageIndex].image, {
          width: 210,
          height: 500,
          margin: 2,
          position: new go.Point(0, 0),
          imageStretch: go.GraphObject.Fill,
          click(e, obj) {
            drawCoordinates(e.Wr.screenX, e.Wr.screenY);
          },
}),
2

First, do not use any two-letter properties – those are undocumented minified names that will change with each release. Please read GoJS Introduction -- Northwoods Software

Second, rendering using Canvas functions will not work in general. In fact, even assuming that there is a Canvas there might not work.

Did you want to use the FreehandDrawingTool extension? Freehand Drawing Tool
You could show a Picture in the background.