<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple WebGL Example</title>
<style>
canvas {
width: 400px;
height: 400px;
border: 1px solid black; /* Adds a border around the canvas */
}
</style>
</head>
<body>
<canvas id="webglCanvas"></canvas>
<script>
// This script will run once the DOM content is fully loaded.
document.addEventListener("DOMContentLoaded", function() {
// Get the canvas element.
var canvas = document.getElementById('webglCanvas');
// Initialize the WebGL context.
var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
// Check if WebGL is available.
if (!gl) {
alert('WebGL is not supported by your browser.');
return;
}
// Set the clear color to blue with full opacity.
gl.clearColor(0.0, 0.0, 1.0, 1.0); // RGBA: Blue color
// Clear the color buffer with the specified clear color.
gl.clear(gl.COLOR_BUFFER_BIT);
});
</script>