Webgl Uncaught ReferenceError: createShaderFromScriptElement is not defined
canvas, html, html5-canvas, javascript, webgl
Solution
`createShaderFromScript` is part of an external script, not something built in.
Whatever demo you were looking at probably included a webgl-utils file such as this one:
http://greggman.github.com/webgl-fundamentals/webgl/resources/webgl-utils.js
which defines a `createShaderFromScript`.
Problem
I can't find out what I am missing here, why do I get this error? Uncaught ReferenceError: createShaderFromScriptElement is not defined I got this from a common tutorial and just pasted it. Browsers: Firefox and Chrome --> same error at both browsers ``` <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Zooming via HTML5 Canvas Context</title> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <script id="2d-vertex-shader" type="x-shader/x-vertex"> attribute vec2 a_position; void main() { gl_Position = vec4(a_position, 0, 1); } </script> <script id="2d-fragment-shader" type="x-shader/x-fragment"> void main() { gl_FragColor = vec4(0,1,0,1); // green } </script> <script> window.onload = function() { // Get A WebGL context var canvas = document.getElementById("canvas"); var gl = canvas.getContext("experimental-webgl"); // setup a GLSL program var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader"); var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader"); var program = createProgram(gl, [vertexShader, fragmentShader]); gl.useProgram(program); // look up where the vertex data needs to go. var positionLocation = gl.getAttribLocation(program, "a_position"); // Create a buffer and put a single clipspace rectangle in // it (2 triangles) var buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([ -1.0, -1.0, 1.0, -1.0, -1.0, 1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0]), gl.STATIC_DRAW); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); // draw gl.drawArrays(gl.TRIANGLES, 0, 6); } </script> </body> </html> ```