4.- cuadrado relleno degradado

<link rel="stylesheet" href="https://developer.mozilla.org/samples/webgl/sample3/webgl.css" type="text/css">
<script src="https://developer.mozilla.org/samples/webgl/sample3/sylvester.js" type="text/javascript"></script>
<script src="https://developer.mozilla.org/samples/webgl/sample3/glUtils.js" type="text/javascript"></script>
<script src="https://developer.mozilla.org/samples/webgl/sample3/webgl-demo.js" type="text/javascript"></script>

<!-- Fragment shader program -->

<script id="shader-fs" type="x-shader/x-fragment">
  varying lowp vec4 vColor;

  void main(void) {
    gl_FragColor = vColor;
  }
</script>

<!-- Vertex shader program -->

<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec4 aVertexColor;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying lowp vec4 vColor;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
  }
</script>

<div>
  <canvas id="glcanvas" width="535" height="400">
    Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
  </canvas>

</div>
<script>
  start();
</script>