I tried with the debugging script from khronos group - no errors or undefined arguments and getError returns 0. I seem to have done the bare minimum to draw a triangle on the screen, so what is wrong? The shaders don't have errors, the program links and validates. I send the buffer data to the 0th attribute and activated it before drawing...
Can someone more experienced take a look and debug it, please? 
(I hope coding horrors is the place for this topic)
EDIT: Silly me... I draw the triangle and then clear the color buffer -_-. Not that it makes js any easier to debug :D ..
<!DOCTYPE html>
<html>
<head>
<title>WebGL</title>
<style>
#renderCanvas {
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
outline:1px solid gray;
}
</style>
<script src="webgl-debug.js"></script>
<script type="vertexShader" id="basicVertexShader">
attribute vec3 aPosition;
void main() {
gl_Position = vec4(aPosition, 1.0);
}
</script>
<script type="fragmentShader" id="basicFragmentShader">
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="fragmentShader">
</script>
</head>
<body>
<canvas id="renderCanvas" width="500" height="500"></canvas>
<script>
var validateTargetParameter = function (target, flag, gl) {
var success = null,
targetIsProgram = true,
errorMessage = '';
try {
gl.isProgram(target)
} catch (e) {
targetIsProgram = false;
}
if (targetIsProgram) {
success = gl.getProgramParameter(target, flag);
} else {
success = gl.getShaderParameter(target, flag);
}
if (!success) {
if (targetIsProgram) {
errorMessage = gl.getProgramInfoLog(target);
} else {
errorMessage = gl.getShaderInfoLog(target);
}
console.error(errorMessage);
}
}
var createBuffer = function (data, DataTypeConstructor, gl) {
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER,
new DataTypeConstructor(data),
gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return buffer;
}
var createShader = function (source, type, gl) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
validateTargetParameter(shader, gl.COMPILE_STATUS, gl);
return shader;
}
var createProgram = function (vertexShader, fragmentShader, gl) {
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
validateTargetParameter(program, gl.LINK_STATUS, gl);
gl.validateProgram(program);
validateTargetParameter(program, gl.VALIDATE_STATUS, gl);
return program;
}
</script>
<!-- Actual code. -->
<script>
var renderCanvas = document.getElementById('renderCanvas'),
gl = renderCanvas.getContext('webgl');
// Vertex buffer.
var geometryData = [
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0,
0.0, 1.0, 0.0
];
var positionsBuffer = createBuffer(geometryData, Float32Array, gl);
// Shaders.
var vertexShaderSource = document.getElementById('basicVertexShader').innerHTML;
var vertexShader = createShader(vertexShaderSource, gl.VERTEX_SHADER, gl);
var fragmentShaderSource = document.getElementById('basicFragmentShader').innerHTML;
var fragmentShader = createShader(fragmentShaderSource, gl.FRAGMENT_SHADER, gl);
var shaderProgram = createProgram(vertexShader, fragmentShader, gl);
shaderProgram.positionAttrib = gl.getAttribLocation(shaderProgram, 'aPosition');
gl.useProgram(shaderProgram);
// Push data to GPU.
gl.bindBuffer(gl.ARRAY_BUFFER, positionsBuffer);
gl.vertexAttribPointer(shaderProgram.positionAttrib, 3, gl.FLOAT, false, 0, 0);
gl.viewport(0, 0, 500, 500);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enableVertexAttribArray(shaderProgram.positionAttrib);
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl.clear(gl.COLOR_BUFFER_BIT);
console.log(gl.getError());
</script>
</body>
</html>
.
