// source https://jsbin.com/relofow

index.html

<style id="jsbin-css">
#image {
  display:none;
  width: 340px;
  height: 700px;
}
</style>
<img id="image" src="https://c3po-ui.us-west-2.int.expedia.com/media/EXPEDIA_BOOKING_ANDROID_APP/expedia.co.kr_ko_KR/ff1087eb-d4af-4b60-b731-e8733e3bcf78/FlightSearching_1.jpg">
<canvas id="canvas" width="340" height="700">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script id="jsbin-javascript">
"use strict";

var img = document.getElementById("image");
var cvas = document.getElementById('canvas');
var context = cvas.getContext("2d");
context.drawImage(img, 0, 0, 340, 700);

var canvas = undefined,
    startX = undefined,
    endX = undefined,
    startY = undefined,
    endY = undefined;
var mouseIsDown = 0;

function init() {
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.addEventListener("mousedown", mouseDown, false);
  canvas.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
  canvas.removeEventListener("mousemove", mouseXY, false);
  if (mouseIsDown !== 0) {
    mouseIsDown = 0;
    drawSquare(); //update on mouse-up
  }
}

function mouseDown() {
  canvas.addEventListener("mousemove", mouseXY, false);
  mouseIsDown = 1;
  startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract
  startY = endY = event.clientY - canvas.offsetTop; //canvas offset
  drawSquare(); //update
}

function mouseXY(eve) {
  console.log('mouseXY');
  if (mouseIsDown !== 0) {
    endX = eve.pageX - canvas.offsetLeft;
    endY = eve.pageY - canvas.offsetTop;

    drawSquare();
  }
}

function drawSquare() {
  // creating a square
  var width = Math.abs(startX - endX);
  var height = Math.abs(startY - endY);

  var startRectX = startX;
  var startRectY = startY;
  if (startX > endX) {
    startRectX = endX;
  }

  if (startY > endY) {
    startRectY = endY;
  }

  //or use fillRect if you use a bg color
  context.drawImage(img, 0, 0, 340, 700);

  context.beginPath();
  context.rect(startRectX, startRectY, width, height);
  context.fillStyle = "transparent";
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'red';
  context.stroke();
}

init();
</script>

<script id="jsbin-source-css" type="text/css">#image {
  display:none;
  width: 340px;
  height: 700px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">let img = document.getElementById("image");
let cvas = document.getElementById('canvas');
let context = cvas.getContext("2d");
context.drawImage(img, 0, 0, 340, 700);

let canvas, startX, endX, startY, endY;
let mouseIsDown = 0;

function init() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    canvas.addEventListener("mousedown", mouseDown, false);
    canvas.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
      canvas.removeEventListener("mousemove", mouseXY, false);
    if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        drawSquare(); //update on mouse-up

    }
}

function mouseDown() {
    canvas.addEventListener("mousemove", mouseXY, false);
    mouseIsDown = 1;
    startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract
    startY = endY = event.clientY - canvas.offsetTop; //canvas offset
    drawSquare(); //update
}

function mouseXY(eve) {
  console.log('mouseXY');
    if (mouseIsDown !== 0) {
        endX = eve.pageX - canvas.offsetLeft;
        endY = eve.pageY - canvas.offsetTop;
      
      drawSquare();
    }
}

function drawSquare() {
    // creating a square
    let width = Math.abs(startX - endX);
    let height = Math.abs(startY - endY);
    
    let startRectX = startX
    let startRectY = startY
    if (startX > endX) {
      startRectX = endX
    }
  
    if (startY > endY) {
      startRectY = endY
    }
  

    //or use fillRect if you use a bg color
    context.drawImage(img, 0, 0, 340, 700);

    context.beginPath();
    context.rect(startRectX, startRectY, width, height);
    context.fillStyle = "transparent";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'red';
    context.stroke();
}

init()</script>

jsbin.relofow.css

#image {
  display:none;
  width: 340px;
  height: 700px;
}

jsbin.relofow.js

"use strict";

var img = document.getElementById("image");
var cvas = document.getElementById('canvas');
var context = cvas.getContext("2d");
context.drawImage(img, 0, 0, 340, 700);

var canvas = undefined,
    startX = undefined,
    endX = undefined,
    startY = undefined,
    endY = undefined;
var mouseIsDown = 0;

function init() {
  canvas = document.getElementById("canvas");
  context = canvas.getContext("2d");
  canvas.addEventListener("mousedown", mouseDown, false);
  canvas.addEventListener("mouseup", mouseUp, false);
}

function mouseUp() {
  canvas.removeEventListener("mousemove", mouseXY, false);
  if (mouseIsDown !== 0) {
    mouseIsDown = 0;
    drawSquare(); //update on mouse-up
  }
}

function mouseDown() {
  canvas.addEventListener("mousemove", mouseXY, false);
  mouseIsDown = 1;
  startX = endX = event.clientX - canvas.offsetLeft; //remember to subtract
  startY = endY = event.clientY - canvas.offsetTop; //canvas offset
  drawSquare(); //update
}

function mouseXY(eve) {
  console.log('mouseXY');
  if (mouseIsDown !== 0) {
    endX = eve.pageX - canvas.offsetLeft;
    endY = eve.pageY - canvas.offsetTop;

    drawSquare();
  }
}

function drawSquare() {
  // creating a square
  var width = Math.abs(startX - endX);
  var height = Math.abs(startY - endY);

  var startRectX = startX;
  var startRectY = startY;
  if (startX > endX) {
    startRectX = endX;
  }

  if (startY > endY) {
    startRectY = endY;
  }

  //or use fillRect if you use a bg color
  context.drawImage(img, 0, 0, 340, 700);

  context.beginPath();
  context.rect(startRectX, startRectY, width, height);
  context.fillStyle = "transparent";
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = 'red';
  context.stroke();
}

init();