HTML oncontextrestored Event Attribute

The oncontextrestored HTML event attribute is an event handler that triggers when a WebGL rendering context that was previously lost has been successfully restored. It is part of the WebGL API and is primarily used when working with <canvas> elements for 3D graphics rendering.

Key Points

1. Related Event:

   • The actual event is called webglcontextrestored.
   • It occurs after a webglcontextlost event, which happens when the WebGL context is lost (e.g., due to graphics driver reset, browser resource management, or heavy GPU usage).

2. Purpose:

   • Allows developers to restore any resources (like textures, buffers, shaders) that were deleted when the context was lost.
   • Without handling this event, your WebGL graphics may fail to render properly after a context loss.

3. Event Target:

   • Typically attached to a <canvas> element that uses a WebGL rendering context.

4. Event Object:

   • The event handler receives a WebGLContextEvent object with properties such as:

     • type - the type of the event, which will be "webglcontextrestored".
     • target - the <canvas> element associated with the context.

5. Difference from oncontextlost:

   • oncontextlost fires when the WebGL context is lost.
   • oncontextrestored fires when the context has been restored and the canvas can resume rendering.

Usage Example

HTML

<canvas id="myCanvas" width="400" height="300"
        onwebglcontextrestored="handleContextRestored()">
</canvas>

JavaScript

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

canvas.addEventListener('webglcontextlost', function(event) {
    event.preventDefault(); // Prevent default behavior to allow restoration
    console.log('WebGL context lost!');
}, false);

canvas.addEventListener('webglcontextrestored', function(event) {
    console.log('WebGL context restored!');
    // Reinitialize shaders, buffers, textures, etc.
    initWebGLResources(gl);
}, false);

function initWebGLResources(gl) {
    // Example: recreate buffers and textures
    console.log('Reinitializing WebGL resources...');
}

Best Practices

1. Always handle oncontextrestored if your application uses WebGL to ensure a smooth user experience.
2. Reinitialize all GPU resources that were lost during the context loss.
3. Prevent default context loss behavior using event.preventDefault() inside oncontextlost.