JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outliner">


<div id="main_track" style="width:901px;margin: auto;overflow-x: scroll;overflow-y: hidden;position: relative;  height: 150px; " >
				<canvas height="50" width="1901" id='timeLine'></canvas>
			
			</div> 
      </div>

CSS

#outliner:after{
display: block;
position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  background: #ff0000;
  content: "";
  height: 78%;
  
}
#outLiner{
	position: relative;
display: block;	
}

JavaScript

var stillDown=false;
var current_type='points';
window.onkeydown=function(event){
	if (event.keyCode==17 && !stillDown){
		console.log("key DOWN!");
			stillDown=true;
				var context = document.getElementById('timeLine').getContext('2d');
				const place=document.getElementById("main_track").scrollLeft;
				context.beginPath();
				context.arc(place+450, 40, 3, 0, 2 * Math.PI, false);
				context.strokeStyle = '#000000';
				context.fillStyle = '#ff0000';
				context.lineWidth = 2;
				context.fill();
				context.stroke();
				
		}
	
}
window.onkeyup=function(event){
	
	if (event.keyCode==17 && stillDown){
		

			console.log("key UP!");
			stillDown=false;				
		}
	
}