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.