shiftyp/index.css

## index.css
.canvas {
  width: 400px;
  height: 400px;
  border: 1px solid #f00;
  user-select: none;
  -webkit-user-select: none;
}

.pixel {
  width: 5px;
  height: 5px;
  background-color: #fff;
  float: left;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Simple Paint Program</title>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="container" class="canvas"></div>
	<script type="text/javascript" src="index.js"></script>
</body>
</html>

## index.js
var selectedColor = '#000';
var container = document.getElementById('container');
var pixelCount = (container.clientWidth / 5) * (container.clientHeight / 5);

function draw(event) {
  var pixel = event.target;
  if (pixel === container) return;
  pixel.style.backgroundColor = selectedColor;
}

function startDraw(event) {
  container.addEventListener('mouseover', draw);
  draw(event);
}

function stopDraw(event) {
  container.removeEventListener('mouseover', draw);
}

container.addEventListener('mousedown', startDraw);
container.addEventListener('mouseup', stopDraw);

for (var i = 0; i < pixelCount; i++) {
  var pixel = document.createElement('div');
  pixel.className = 'pixel';
  container.appendChild(pixel);
}
	.canvas {
	width: 400px;
	height: 400px;
	border: 1px solid #f00;
	user-select: none;
	-webkit-user-select: none;
	}

	.pixel {
	width: 5px;
	height: 5px;
	background-color: #fff;
	float: left;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Simple Paint Program</title>
	<link rel="stylesheet" href="index.css">
	</head>
	<body>
	<div id="container" class="canvas"></div>
	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	var selectedColor = '#000';
	var container = document.getElementById('container');
	var pixelCount = (container.clientWidth / 5) * (container.clientHeight / 5);

	function draw(event) {
	var pixel = event.target;
	if (pixel === container) return;
	pixel.style.backgroundColor = selectedColor;
	}

	function startDraw(event) {
	container.addEventListener('mouseover', draw);
	draw(event);
	}

	function stopDraw(event) {
	container.removeEventListener('mouseover', draw);
	}

	container.addEventListener('mousedown', startDraw);
	container.addEventListener('mouseup', stopDraw);

	for (var i = 0; i < pixelCount; i++) {
	var pixel = document.createElement('div');
	pixel.className = 'pixel';
	container.appendChild(pixel);
	}