Ich denke, ich habe es selbst herausgefunden:

window.onload = function() {  
	var x = 0;  
	var y = 0;  
	var pc = 30;  
	var w = 38;  
	var h = 19;  
	for(x = 0;x < w;x++) {  
		for(y = 0;y < h;y++) {  
			var left = Math.abs(y - (h / 2));  
			var elm = document.createElement("div");  
			elm.style.fontFamily = "Courier New";  
			elm.style.fontSize = "10px";  
			elm.style.textAlign = "center";  
			elm.style.color = "black";  
			elm.style.width = (pc - 2) + "px";  
			elm.style.height = (pc - 2) + "px";  
			elm.style.position = "absolute";  
			elm.style.top = ((y * pc) + 1) + "px";  
			elm.style.left = ((x * pc) + 1) + "px";  
			elm.style.background = "red";  
			if(Math.floor(x / 2) < (h / 2) - (y + 1)) {  
				elm.style.background = "#DFDFDF";  
			}  
			if(Math.floor(x / 2) > (h / 2) + y) {  
				elm.style.background = "#DFDFDF";  
			}  
			if(Math.floor(y) > Math.floor(h / 2) + (x / 2)) {  
				elm.style.background = "#DFDFDF";  
			}  
			if((x / 2) > (w / 2) - (y + 0.5) + Math.floor((w / 2) / 2)) {  
				elm.style.background = "#DFDFDF";  
			}  
			elm.innerHTML = x + "<br>" + y;  
			document.body.appendChild(elm);  
		}  
	}  
}

Dieser Teil hat mir gefehlt. Ist mathematisch etwas chaotisch. Macht aber genau das, was ich will. Und das pixelgenau.

if((x / 2) > (w / 2) - (y + 0.5) + Math.floor((w / 2) / 2)) {  
	elm.style.background = "#DFDFDF";  
}