// 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">
var img = document.getElementById("image");
var cvas = document.getElementById('canvas');
var ctx = cvas.getContext("2d");
ctx.drawImage(img, 0, 0, 340, 700);

var canvas, context, startX, endX, startY, endY;
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);
    console.log('mouseUp');
    if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        drawSquare(); //update on mouse-up

    }
}

function mouseDown() {
        canvas.addEventListener("mousemove", mouseXY, false);
  console.log('mouseDown');
    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) {
        if (!eve) {
            var eve = event;
        }
        endX = event.pageX - canvas.offsetLeft;
        endY = event.pageY - canvas.offsetTop;
      
      drawSquare();
    }
}

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

    //or use fillRect if you use a bg color
        context.clearRect(startX + 1, startY + 1, width - 1, height - 1);
  ctx.drawImage(img, 0, 0, 340, 700);

    context.beginPath();
    context.rect(startX, startY, width, height);
    context.fillStyle = "transparent";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    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">var img = document.getElementById("image");
var cvas = document.getElementById('canvas');
var ctx = cvas.getContext("2d");
ctx.drawImage(img, 0, 0, 340, 700);

var canvas, context, startX, endX, startY, endY;
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);
    console.log('mouseUp');
    if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        drawSquare(); //update on mouse-up

    }
}

function mouseDown() {
        canvas.addEventListener("mousemove", mouseXY, false);
  console.log('mouseDown');
    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) {
        if (!eve) {
            var eve = event;
        }
        endX = event.pageX - canvas.offsetLeft;
        endY = event.pageY - canvas.offsetTop;
      
      drawSquare();
    }
}

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

    //or use fillRect if you use a bg color
        context.clearRect(startX + 1, startY + 1, width - 1, height - 1);
  ctx.drawImage(img, 0, 0, 340, 700);

    context.beginPath();
    context.rect(startX, startY, width, height);
    context.fillStyle = "transparent";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    context.stroke();
}

init()</script>

jsbin.relofow.css

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

jsbin.relofow.js

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

var canvas, context, startX, endX, startY, endY;
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);
    console.log('mouseUp');
    if (mouseIsDown !== 0) {
        mouseIsDown = 0;
        drawSquare(); //update on mouse-up

    }
}

function mouseDown() {
        canvas.addEventListener("mousemove", mouseXY, false);
  console.log('mouseDown');
    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) {
        if (!eve) {
            var eve = event;
        }
        endX = event.pageX - canvas.offsetLeft;
        endY = event.pageY - canvas.offsetTop;
      
      drawSquare();
    }
}

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

    //or use fillRect if you use a bg color
        context.clearRect(startX + 1, startY + 1, width - 1, height - 1);
  ctx.drawImage(img, 0, 0, 340, 700);

    context.beginPath();
    context.rect(startX, startY, width, height);
    context.fillStyle = "transparent";
    context.fill();
    context.lineWidth = 2;
    context.strokeStyle = 'black';
    context.stroke();
}

init()