JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas"></canvas>

CSS

#myCanvas{
    width: 100%;
    height: 100%;
}

JavaScript

var telemetry = {
    $canvas: $('#myCanvas'),
    startPosition: {x:0,y:0},
    distance: 0,
    getMousePosition: function(event){
        var position = {
            x: event.pageX - this.$canvas.offset().left,
            y: event.pageY - this.$canvas.offset().top
        }
        return position;
    },
    getDistance: function(startPosition, endPosition){
        //find distance in each x and y directions
        var dx = endPosition.x - startPosition.x;
        var dy = endPosition.y - startPosition.y;

        // use pythagorean theorem
        return Math.sqrt((dx*dx) + (dy*dy));
    },
    onMouseDown: function(event){
        this.startPosition = this.getMousePosition(event);
    },
    onMouseUp: function(event){
        this.distance = this.getDistance(this.startPosition, this.getMousePosition(event));
        alert("here you end");
    }
}

telemetry.$canvas.mousedown(function(event){
    telemetry.onMouseDown(event);
}).mouseup(function(event){
    telemetry.onMouseUp(event);
    alert('you dragged ' + telemetry.distance + 'px');
});