Setting up WebGL within an HTML5 page

To provide a “window” for WebGL to use for rendering, you first create an HTML5 Canvas element within your Web page. Example B.2 demonstrates creating a 512 × 512-sized Canvas with a blue background. In the case that the browser doesn’t support WebGL, a simple page stating the browser doesn’t support Canvas elements is shown. In the example, we name the Canvas gl-canvas by setting its id attribute. We’ll use its id later when we initialize WebGL.

Example B.2. Creating an HTML5 Canvas Element

<html><style type="text/css">  canvas { background: blue; }</style><body><canvas id="gl-canvas" width="512" height="512">  Oops ... your browser doesn’t support HTML5’s Canvas elements!

Get OpenGL Programming Guide: The Official Guide to Learning OpenGL, Version 4.3, Eighth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.