Javascript - draw a rectangular selection on an image

Question

I need some help to implement a feature in my vuejs capacitor app. I'm getting a snapshot from an ip cam every second and this will simulate a video stream since rtsp isn't supported directly in android webView.

What I need is to give to the user the ability to draw a selection on the image like cropper.js does and then get the x and y coords of the selection to draw that particular area on a canvas. Is this possible using javascript?

This is the code I have in my video component

<template>
    <div class="row m-0" id="camView">
        <div class="col-12 p-0 position-relative overflow-hidden">
            <!-- preview selected area from immagine -->
            <canvas class="position-absolute top-0 end-0" id="cropFrame" ref="cropFrame"></canvas>
<!-- display the snapshot from node backend -->
            <img class="img-fluid w-100" :src="imageURI" ref="camFrame" id="camFrame">
        </div>
    </div>
</template>

<script>
const NodeJS = Capacitor.Plugins.NodeJS;
// import { PluginListenerHandle } from '@capacitor/core';
// import { Motion } from '@capacitor/motion';
// import Cropper from 'cropperjs'
// import 'cropperjs/dist/cropper.min.css'


let accelHandler = PluginListenerHandle;

export default {
    name: 'VideoPlayer',
    data() {
        return {
            ctx: null,
            x: null,
            y: null,
            // cropper: new Cropper(this.$refs.srcImg, this.cropperOpt),
            // cropperOpt: {
            //  aspectRatio: 16 / 9,
            //  viewMode: 1,
            //  //preview: 'cropFrame',
            //  modal: false,
            //  dragMode: 'crop',
            //  movable: false,
            //  zoomable: false,
            //  zoomOnTouch: false,
            //  guides: true,
            //  responsive: false,
            //  rotatable: false,
            // },
            snapshotInterval: null,
            imageURI: null
        }
    },
    created() {
        window.screen.orientation.lock('landscape')
    },
    mounted() {
        this.snapshotInterval = setInterval( () => { 
            this.getSnapshot()
        }, 1000)
    },
    methods: {
        createPreview() {
            this.ctx = this.$refs.cropFrame.getContext('2d')
    // tried with motion sensor but without success
            //Motion.addListener('accel', (event) => {
                //this.x =  event.accelerationIncludingGravity.x * event.target.innerWidth
                //this.y =  event.accelerationIncludingGravity.y * event.target.innerHeight
                //console.log(this.x, this.y)
                //this.ctx.drawImage(this.$refs.camFrame, this.x, this.y, 360, 240, 0, 0, 360, 240)
            })
        },
        getSnapshot() {
            NodeJS.send({
                eventName: 'get-image', 
                args: ['']    
            })
            NodeJS.addListener('image', (data) => {
                //fix
                this.imageURI = `data:image/jpeg;base64, ${data.args[0]}`
                this.createPreview()
            })      
        },
        closeCam(){
            NodeJS.send({ 
                eventName: 'close-cam', 
                args: ['']
            })
            clearInterval(this.snapshotInterval)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.col-12 {
    #camFrame {
        display: block;
        max-width: 100%;
    }
    #cropFrame {
        overflow: hidden;
        width: 360px;
        height: 240px;
        z-index: 1;
    }
}
</style>

What I've tried is to use cropper.js that give the ability to create a selection on an image and preview it but it will flicker the image when the image is updated each second.

Any suggestion will be appreciated, thank you in advice.