Using Javascript to crop image on my app

Need help
1

Hi guys. Need help to integrate marker.js CROPRO function to my page’s dynamic image. Say i have an image element and i want it to be cropped and manipulated with CROPRO while i am clicking on it. Documentation says i need to embed this code

const cropArea = new cropro.CropArea(this.targetImage);
cropArea.addRenderEventListener((imgURL) => target.src = imgURL);
cropArea.show();

Or this page example

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All defaults demo</title>
  <script src="https://unpkg.com/cropro/cropro.js"></script>
  <script>
    function showCropArea(target) {
      const cropArea = new cropro.CropArea(this.targetImage);
      cropArea.addRenderEventListener((imgURL) => target.src = imgURL);
      cropArea.show();
    }
  </script>
</head>
<body>

  <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showCropArea(this);" />
  
</body>

Niether works through HTML-element or mb I am doing that wrong? Any help on that? seems to be a very easy thing to do but i cant.

reference how it should look like is here

Thanks in advance )