HTML5 Application Template

The following is a HTML5 app template with a canvas element. To have a clear vision of the canvas, we add a border style to it. This border style will be removed later if not necessary, for example, when we have drawn something in the canvas.

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 Application Template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" href="css/demostyle.css">
        <script src="js/demoutils.js"></script>
        
        <style type="text/css">
            #webgl-canvas {
                border: 1px dotted lightgray;
            }
        </style>
    </head>
    <body>
        <h1>HTML5 Application Template</h1>
        <canvas id="webgl-canvas">Your browser does not support HTML5 Canvas!</canvas>
    </body>
</html>

By default, the canvas width is 300px and its height is 300px.

demostyle.css is to center the canvas. And demoutils.js is to set the width and the height of the canvas according to the client width. None of them are relavant of WebGL programming, but to beautify the HTML elements on the page.

View demo.

Key Notes: