Untitled

<!DOCTYPE html>
<html>


<body>


<canvas id="bar1" class="bar" height="500" width="15" onclick="activate('bar1')"></canvas>
<canvas id="bar2" class="bar" height="500" width="15" onclick="activate('bar2')"></canvas>


<script type="text/javascript">

	function activate(id){
		bars=document.getElementsByClassName("bar")
		for (var i=0; i<bars.length; i++){
			bars[i].style.border="solid 1px black"
			bars[i].removeEventListener("mousedown",function(event){click(id,event);})
		}
		bar=document.getElementById(id)
		bar.style.border="solid 1px red"
		bar.addEventListener("mousedown",function(event){click(id,event);})
	}

	function click(id,event){
		console.log(event.y)
		bar=document.getElementById(id)
		move(id,event.y-bar.offsetTop)

	}

	function move(id,ypos){
		bar=document.getElementById(id)
		ctx=bar.getContext("2d");
		ctx.clearRect(0,0,bar.width,bar.height);
    	ctx.fillRect(0,ypos,15,bar.height);
	}

</script>

<style type="text/css">
	.bar{
		display: inline-block;
		border-style: solid;
		border-width: 1px;
    	border-color: black;
	}
</style>

</body>
</html>