X, Y drag coodiantes for brightness and contrast

X, Y drag coodiantes for brightness and contrast

HTML

<div id="mydiv">
</div>

<br>
<br>
<div id="test">
test
</div>
<button id="reset">
Reset
</button>

CSS

*{
  margin:0;
  padding:0;
}

#mydiv {
  width: 400px;
  height: 400px;
  background-image: url("http://www.lorempixel.com/200/200/");
  background-size: 100%;
  border: solid 1px black;
  background-repeat: no-repeat;
}

JavaScript

document.getElementById("mydiv").addEventListener("mousedown", function(e){

    document.getElementById("mydiv").onmousemove = function(e) {
        myFunction(e);
     }
});

document.getElementById("mydiv").addEventListener("mouseup", function(e){
    document.getElementById("mydiv").onmousemove = null
});

//reset
document.getElementById("reset").addEventListener("click", function(){
		document.getElementById("mydiv").removeAttribute("style");
});

function myFunction(e) {
  var x = e.clientX;
  var y = e.clientY;
  var coor = "Coordinates: (" + x + "," + y + ")";
  
  var widthTest = document.getElementById("mydiv").offsetWidth;
  
 var newX = (x/100) + 1;
 var newY = (y/100) + 1;

document.getElementById("mydiv").style.filter = 'contrast(' + newX +') brightness(' + newY +')';
document.getElementById("test").innerHTML = coor += widthTest;
}