WebGL and canvas contexts

WebGL is a rendering context for drawing to the HTML5 element, and is an alternative to the 2D rendering context. Often, when someone mentions the canvas, they are referring to the 2D rendering context, which is accessed by calling getContext and passing in the string 2d. Both contexts are methods of rendering to the HTML5 canvas element. A context is a type of API for immediate mode rendering. Two different WebGL contexts can be requested, both of which provide access to different versions of the WebGL API. These contexts are webgl and webgl2. In the following examples, I will be using the webgl context and will be using the WebGL 1.0 API. There is also a rarely used context for rendering a bitmap to the canvas that we can access by passing in bitmaprenderer as a string value.

I want to point out that the term canvas is sometimes used to refer to the 2D canvas context and sometimes used to refer to the immediate mode rendering HTML5 canvas element. When I refer to canvas in this book without mentioning the 2D context, I am referring to the HTML5 canvas element.

In the next section, I will introduce you to shaders and the GLSL shader language.