CodePen

HTML

            
              
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var canvas = document.createElement( 'canvas' );
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

document.body.appendChild( canvas );

var gl = canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' );
if ( !gl ) alert( "You need WebGL to view this blue square" );

var vSrc = 'attribute vec2 aVertexPosition; void main(){ gl_Position = vec4( aVertexPosition, 0, 1 ); }';
var fSrc = 'void main(){ gl_FragColor = vec4(0,0,1,1); }';

var vs = gl.createShader( gl.VERTEX_SHADER );
var fs = gl.createShader( gl.FRAGMENT_SHADER );

gl.shaderSource( vs, vSrc );
gl.shaderSource( fs, fSrc );

gl.compileShader( vs );
gl.compileShader( fs );

if ( !gl.getShaderParameter( vs, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( vs );
if ( !gl.getShaderParameter( fs, gl.COMPILE_STATUS ) ) throw gl.getShaderInfoLog( fs );

var program = gl.createProgram();
gl.attachShader( program, vs );
gl.attachShader( program, fs );
gl.linkProgram( program );

if ( !gl.getProgramParameter( program, gl.LINK_STATUS ) ) throw gl.getProgramInfoLog( program );

gl.useProgram( program );
program.aVertexPositionLoc = gl.getAttribLocation( program, 'aVertexPosition' );

var vertices = new Float32Array([
    -0.6, -0.6, 0.0,
     0.6, -0.6, 0.0,
    -0.6,  0.6, 0.0,
     0.6,  0.6, 0.0
]);

var vertexBuffer = gl.createBuffer();

gl.bindBuffer( gl.ARRAY_BUFFER, vertexBuffer );
gl.bufferData( gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW );
gl.enableVertexAttribArray( program.aVertexPositionLoc );
gl.vertexAttribPointer( program.aVertexPositionLoc, 3, gl.FLOAT, false, 0, 0 );

gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );

gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................