WebGL - Html5 Canvas Overview

HTML5 Canvas Overview for WebGL

Modern web browsers offer powerful features for creating graphics, including the HTML5 <canvas> element, SVG, CSS Transforms, and WebGL. WebGL applications specifically utilize the <canvas> element as their drawing surface.

The HTML5 <canvas> Element

The <canvas> element provides a resolution-dependent bitmap area where you can draw graphics using JavaScript. It acts as a container for graphics; the actual drawing is done via a rendering context.

Syntax

A basic canvas element includes width and height attributes, along with standard HTML attributes like id.

<canvas id="myCanvas" width="640" height="480">
  <!-- Fallback content for browsers that don't support canvas -->
  Your browser does not support the HTML5 canvas element.
</canvas>

Canvas Attributes

Key attributes:

• id: A unique identifier used to access the canvas element via JavaScript (document.getElementById).
• width: The width of the canvas drawing surface in CSS pixels.
• height: The height of the canvas drawing surface in CSS pixels.

It’s crucial to set width and height directly as attributes on the <canvas> tag itself, not just via CSS. Setting dimensions via CSS scales the canvas element, but doesn’t change the underlying drawing buffer size, which can lead to blurry or distorted graphics. The default size if attributes are omitted is typically 300x150 pixels.

Example - Creating a Canvas with a Border

This HTML creates a canvas and uses CSS to add a visual border.

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Example</title>
    <style>
        #myCanvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

Expected Result:

This will display a 200x100 pixel empty area with a red border.

Rendering Contexts

The <canvas> element itself is just a blank slate. To draw on it, you need to obtain a rendering context using the element’s getContext() method. This method returns an object with the drawing API.

Common Context Types:

• '2d': Provides the Canvas 2D API for drawing shapes, text, and images in two dimensions.
• 'webgl': Provides the WebGL 1 API for hardware-accelerated 2D and 3D graphics.
• 'webgl2': Provides the WebGL 2 API, based on OpenGL ES 3.0, offering more advanced features.
• 'bitmaprenderer': Used for transferring ImageBitmap objects to the canvas with low overhead.

Example - Getting the 2D Context

This example gets the 2D context and draws simple text.

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="400" height="150"></canvas>

    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        if (ctx) {
            ctx.font = '20pt Arial';
            ctx.fillStyle = 'blue';
            ctx.fillText('Hello Canvas 2D!', 50, 50);
        } else {
            console.error('2D context not supported');
        }
    </script>
</body>
</html>

Expected Result:

Displays the text “Hello Canvas 2D!” in blue on the canvas.

Getting the WebGL Context

For WebGL applications, you request either the 'webgl' or 'webgl2' context. It’s good practice to check if the context was successfully obtained, as WebGL might not be supported by the browser or hardware.

Example - Getting the WebGL Context

<!DOCTYPE html>
<html>
<body>
    <canvas id="my_canvas" width="300" height="200"></canvas>

    <script>
        const canvas = document.getElementById('my_canvas');
        let gl = canvas.getContext('webgl'); // Try WebGL 1 first

        if (!gl) {
            console.log('WebGL 1 not supported, trying WebGL 2...');
            gl = canvas.getContext('webgl2'); // Try WebGL 2 if WebGL 1 failed
        }

        if (gl) {
            console.log('WebGL context obtained successfully!');
            // Set clear color to light grey and clear the canvas
            gl.clearColor(0.9, 0.9, 0.8, 1.0); // RGBA
            gl.clear(gl.COLOR_BUFFER_BIT);
            // ... further WebGL setup and rendering ...
        } else {
            alert('WebGL is not supported by your browser/device.');
        }
    </script>
</body>
</html>

Expected Result:

If WebGL is supported, this will display an empty canvas cleared to a light grey color. A message will be logged to the console.

The canvas element provides the necessary drawing surface, and requesting the appropriate WebGL context is the first step in building any WebGL application.