JSFiddle - React, Tailwind, and code Playground

HTML

<img src = "http://4.bp.blogspot.com/--P4rjbA1ips/TVcaC1YfJkI/AAAAAAAAE1I/FExh2AxrDks/s400/fondos-paisajes-1024.jpg" />
<canvas width = 400 height = 300></canvas>

CSS

img, canvas{
    position: absolute;
}

JavaScript

var canvas = document.getElementsByTagName("canvas")[0],
    context = canvas.getContext("2d"),
    cont = 0,
    xIni, yIni, 
    xFin, yFin;

window.addEventListener("click", function(e){
    if (++cont % 2 !== 0){       
        xIni = e.clientX;
        yIni = e.clientY;
    }
    else{
        xFin = e.clientX;
        yFin = e.clientY;
        
        context.moveTo(xIni, yIni);
        context.lineTo(xFin, yFin);
        context.lineWidth = 2;
        context.strokeStyle = "white";
        context.stroke();
    }
}, false);