Как нарисовать булавку на холсте, используя ReactJS

Question

Я просто пытаюсь нарисовать булавку на холсте, который выглядит следующим образом:

Я просто использую обычный холст ... ничего особенного. Я новичок в использовании холстов и рисовании, и я не нашел хорошего ответа. У меня есть координаты x, y курсора, и когда я нажимаю на страницу, я хочу оставить булавку в этом месте

Спасибо

ОБНОВЛЕНИЕ: вот метод, к которому я обращаюсь нарисуйте на холсте:

const addNote = (event) => { 
        const canvas = document.getElementsByTagName("canvas")[0];
        const ctx = canvas.getContext("2d");
        const page = pageNumber;

        const mouse = getMousePos(canvas, event);
        const X = mouse.x;
        const Y = mouse.y;

        const note = prompt("Add a note:");
        if(note) {
            /* Draw note circle */
            ctx.fillStyle = "orange";
            ctx.beginPath();
            ctx.arc(X, Y, 9, 0, 2*Math.PI);
            ctx.fill();
            /* End drawing */

            /* Draw text */
            ctx.fillStyle = "black"
            ctx.font = "bold 15px Times New Roman";
            ctx.fillText("   " + note, X, Y);
            /* End text draw */

            props.addNote(note, page)
        }
    }

Вот скриншот того, что у меня сейчас есть:

Answer 1

Вот пример того, что я упомянул в своих комментариях, в данном случае я использую изображение SVG:

<canvas id=canvas width=300 height=140></canvas>

<script>
  function svgimage() {
    var image = `<svg width="2481" height="2073" xmlns="http://www.w3.org/2000/svg">
 <g>
  <path d="m730.940002,1839.630005c-38.765991,-190.300049 -107.116028,-348.670044 -189.903015,-495.440063c-61.406982,-108.869995 -132.543976,-209.359985 -198.363983,-314.939941c-21.972015,-35.242981 -40.93399,-72.476013 -62.046997,-109.052979c-42.216003,-73.137024 -76.444,-157.934998 -74.269012,-267.932007c2.125,-107.473022 33.208008,-193.684021 78.029999,-264.172028c73.718994,-115.934998 197.201019,-210.988983 362.884003,-235.968994c135.466003,-20.423996 262.474976,14.082001 352.54303,66.748001c73.596008,43.03801 130.596008,100.526993 173.915955,168.280014c45.219971,70.716003 76.359985,154.259979 78.969971,263.231964c1.340088,55.830017 -7.799927,107.532043 -20.679932,150.41803c-13.030029,43.408997 -33.98999,79.695007 -52.640015,118.453979c-36.410034,75.658997 -82.050049,144.984009 -127.859985,214.343994c-136.437012,206.609985 -264.496033,417.310059 -320.580017,706.030029z" stroke-width="37" stroke-miterlimit="10" fill-rule="evenodd" fill="#c92a2a" clip-rule="evenodd" id="svg_2"/>
  <circle r="183.333" cy="651.047" cx="729.546" fill-rule="evenodd" fill="#ffffff" clip-rule="evenodd" id="svg_4"/>
 </g>
</svg>`;
    return encodeURIComponent(image);
  }

  function draw() {
    ctx.rect(20, 35, 150, 10);
    ctx.rect(50, 80, 100, 20);
    ctx.stroke();
    
    ctx.drawImage(img, 50, 50, 100, 80);
    ctx.drawImage(img, 100, 20, 100, 80);

    ctx.font = "bold 15px Times New Roman";
    ctx.fillText("HELLO WORLD", 40, 20);
  }

  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');

  var img = new Image();
  img.onload = draw
  img.src = 'data:image/svg+xml;charset=utf-8,' + svgimage();
</script>

Вот источник этого изображения:
http://www.clker.com/clipart-red-pin.html