MENU


Canvas Texture

Besides an Image object and a video object, you may also pass a canvas object to texImage2D(). Like them, the canvas object must have power-of-two sizes, unless the 'TEXTURE_WRAP_S' and 'TEXTURE_WRAP_T' parameters are set to 'CLAMP_TO_EDGE'.

One may choose to show the additional Image object, video object, or canvas object by coding their tags directly in the HTML file or choose to hide them by creating them dynamically in the JavaScript.

Here we draw a red square on another canvas, and then use that canvas as the texture.
RESETRUNFULL
<!DOCTYPE html><html><head>
<script src="/shared/webgl-library.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
   attribute vec4 a_Position;
   attribute vec2 a_TexCoord;
   varying vec2 v_TexCoord;
   void main() {
      gl_Position = a_Position;
      v_TexCoord = a_TexCoord;
   }
</script>
<script id="shader-fs" type="x-shader/x-fragment">
   #ifdef GL_ES
   precision mediump float;
   #endif
   uniform sampler2D u_Sampler0;
   varying vec2 v_TexCoord;
   void main() {
      gl_FragColor = texture2D(u_Sampler0, v_TexCoord);
   }
</script>
<script type="text/javascript">
function WebGLStart() {
   var canvas = document.getElementById('cv');
   var gl = canvas.getContext('webgl');
   initShaders(gl, "shader-vs", "shader-fs");
   var n=initVertexBuffers(gl);
   gl.clearColor(0.0, 0.0, 0.0, 1.0);
      
   var canvas2=document.createElement('canvas');
   canvas2.width=512;
   canvas2.height=512;
   g = canvas2.getContext('2d');
   g.fillStyle="rgb(255,0,0)";
   g.fillRect(100,100,300,300);
   
   var texture0 = gl.createTexture();
   var u_Sampler0 = gl.getUniformLocation(gl.program,  'u_Sampler0');
   loadTexture(gl, n, texture0, u_Sampler0, canvas2, gl.TEXTURE0,  0);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}
function initVertexBuffers(gl) {
   var verticesTexCoords = new Float32Array([     // Vertex coordinate --> Texture coordinate
     -0.3,  0.3,   0.0, 1.0,
     -0.3, -0.3,   0.0, 0.0,
      0.3,  0.3,   1.0, 1.0,
      0.3, -0.3,   1.0, 0.0,
   ]);
   var n = 4; // The number of vertices
   
   var vertexTexCoordBuffer = gl.createBuffer();
   
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
   gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords,  gl.STATIC_DRAW);
   var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
   
   var a_Position = gl.getAttribLocation(gl.program,  'a_Position');
   gl.vertexAttribPointer(a_Position,  2,  gl.FLOAT,  false,  FSIZE*4,   0);
   gl.enableVertexAttribArray(a_Position);
  
   var a_TexCoord=gl.getAttribLocation(gl.program,  'a_TexCoord');
   gl.vertexAttribPointer(a_TexCoord,   2,   gl.FLOAT,   false,  FSIZE * 4,   FSIZE * 2);
   gl.enableVertexAttribArray(a_TexCoord);
   
   return n;
}
</script>
</head>
<body onload="WebGLStart();">
   <canvas id="cv" style="border: none;" width="500" height="500"></canvas>
</body></html>