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.