HTML oncontextrestored Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

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

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).
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.
Event Target:
- Typically attached to a <canvas> element that uses a WebGL rendering context.
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.
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

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

Syntax

<canvas oncontextrestored="script()"></canvas>

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>WebGL Context Restored Example</title>

<style>

  canvas {

    border: 1px solid black;

  }

</style>

</head>

<body>



<h2>WebGL Context Lost & Restored Example</h2>

<canvas id="myCanvas" width="200" height="200"></canvas>

<button id="loseContextBtn">Simulate Context Loss</button>



<script>

const canvas = document.getElementById('myCanvas');

const gl = canvas.getContext('webgl');



if (!gl) {

    alert('WebGL not supported in your browser.');

}



// Simple WebGL setup

function initWebGLResources() {

    // Example: set clear color and clear canvas

    gl.clearColor(Math.random(), Math.random(), Math.random(), 1.0); // random color

    gl.clear(gl.COLOR_BUFFER_BIT);

    console.log('WebGL resources initialized.');

}



// Handle context lost

canvas.addEventListener('webglcontextlost', function(event) {

    event.preventDefault(); // allow restoration

    console.log('WebGL context lost!');

}, false);



// Handle context restored

canvas.addEventListener('webglcontextrestored', function(event) {

    console.log('WebGL context restored!');

    initWebGLResources();

}, false);



// Initial rendering

initWebGLResources();



// Simulate context loss (for testing)

document.getElementById('loseContextBtn').addEventListener('click', () => {

    const ext = gl.getExtension('WEBGL_lose_context');

    if (ext) {

        ext.loseContext(); // triggers context lost event

    } else {

        alert('WEBGL_lose_context not supported in this browser.');

    }

});

</script>



</body>

</html>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML oncontextrestored event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.