Time for Action: Creating an HTML5 Canvas Element

A canvas is a rectangular element in your web page where your 3D scene will be rendered. Let's create a web page and add a HTML5 canvas element:

Using your favorite editor, create a web page with the following code:

<html>
<head>
  <title>Real-Time 3D Graphics with WebGL2</title>
  <link rel="shortcut icon" type="image/png" 
   href="/common/images/favicon.png" />

  <style type="text/css">
    canvas {
      border: 5px dotted blue;
    }
  </style>
</head>
<body>

  <canvas id="webgl-canvas" width="800" height="600">
    Your browser does not support the HTML5 canvas element.
  </canvas>

</body>
</html>

Save the file as ch01_01_canvas.html.
Open it with a supported browser.
You should see something similar to the following screenshot:

What just happened?

We created a simple web page containing a canvas element. This canvas will contain our 3D application. Let's go very quickly over some relevant elements presented in this example.

Defining a CSS Style

This is the piece of code that determines the canvas style:

<style type="text/css">
  canvas {
    border: 5px dotted blue;
  }
</style>

This code is not fundamental to build a WebGL application. Given that the canvas element is initially empty, a blue-dotted border is a simple way to verify the location of the canvas.

Understanding Canvas Attributes

There are three attributes in our previous example:

id: This is the canvas identifier in the DOM.
width and height: These two attributes determine the size of our canvas element. When these two attributes are missing, Firefox, Chrome, and WebKit will default to using 300px by 150px.

What If Canvas Is Not Supported?

If you see the following message on your screen, Your browser does not support the HTML5 canvas element (which is the message between the <canvas> tags), you need to make sure that you're using one of the supported web browsers described earlier.

If you're using Firefox and you still see this message, you may want to check whether WebGL is enabled (it is by default). To do so, go to Firefox and type about:config in the address bar. Then, look for the webgl.disabled property. If it is set to true, change it to false. When you restart Firefox and load ch01_01_canvas.html, you should be able to see the dotted border of the canvas element.

In the remote case that you still do not see canvas, it could be because your browser has blacklisted your GPU. If this is the case, please use a system with the appropriate hardware.