Pixel draw

HTML

<input type="color"></input>
<div class="track" style="z-index: 1; border: 1px solid black;"></div>

CSS

div{
  position: absolute;
  display: block;
  top:0;
  left:0;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.2);
}

JavaScript

window.onkeydown = function(key){
	var up = 38, down = 40, left = 37, right = 39, enter = 13;
	if(key.keyCode == up){
  	setInterval(aumentar('up') , 6);
  }
  if(key.keyCode == down){
  	setInterval(aumentar('down') , 6);
  }
  if(key.keyCode == left){
  	setInterval(aumentar('left') , 6);
  }
  if(key.keyCode == right){
  	setInterval(aumentar('right') , 6);
  }
   if(key.keyCode == enter){
  	var color = document.querySelector('input');
		var circle = document.createElement('div');
  	circle.style.background = color.value;
  	circle.style.top = (y + 1) + 'px';
  	circle.style.left = (x + 1) + 'px';
  	document.body.appendChild(circle);
  }
}
window.onkeyup = function(key){
	var up = 38, down = 40, left = 37, right = 39;
	if(key.keyCode == up){
  	window.clearInterval(aumentar);
  }
  if(key.keyCode == down){
  	window.clearInterval(aumentar);
  }
  if(key.keyCode == left){
  	window.clearInterval(aumentar);
  }
  if(key.keyCode == right){
  	window.clearInterval(aumentar);
  }
}
var y = 0, x = 0;
function aumentar(dir){
  	if(dir == 'up'){
    	y-= 10;
    	document.querySelector('div').style.top = y + 'px';
    } else if(dir == 'down'){
    	y+= 10;
    	document.querySelector('div').style.top = y + 'px';
    } else if(dir == 'left'){
    	x-= 10;
    	document.querySelector('div').style.left = x + 'px';
    } else if(dir == 'right'){
    	x+= 10;
    	document.querySelector('div').style.left = x + 'px';
    }
}