Request the context again, only one type of context can be generated by every <canvas> element, using another type would return null:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("webgl2");

const retrieveContext = (canvas) =>
  ["2d", "webgl", "webgl2", "webgpu", "bitmaprenderer"]
    .find(type => !!canvas.getContext(type));
  
console.log("retrieved", retrieveContext(canvas));

Note: If you need to support old websites, you might want to add "experimental-webgl" into the list, but then you’d have to wrap the call to getContext() in a try {} catch {} block since unrecognized types should throw, and Safari never recognized that non-standard type.

If you don’t control the page you have a few options.

1. Inspect the canvas in the devtools

   Taking a cue from @kaiido’s answer

   1. Right click on the canvas element and pick “Inspect” or
      of that’s not possible, search in the Elements tab in the
      devtools for the canvas. You can use the search feature
      and search for <canvas

   2. Select the canvas, right click and pick “store as global variable”. Note the name

   3. Paste @kaiido’s code into the console

      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <code>retrieveContext = (canvas) =>

      ["2d", "webgl", "webgl2", "webgpu", "bitmaprenderer"]

      .find(type => !!canvas.getContext(type));

      </code>

      <code>retrieveContext = (canvas) => ["2d", "webgl", "webgl2", "webgpu", "bitmaprenderer"] .find(type => !!canvas.getContext(type)); </code>

      retrieveContext = (canvas) =>
        ["2d", "webgl", "webgl2", "webgpu", "bitmaprenderer"]
          .find(type => !!canvas.getContext(type));
      

   4. call that code with the variable from step 2

      Plain text

      Copy to clipboard

      Open code in new window

      EnlighterJS 3 Syntax Highlighter

      <code>retrieveContext(temp1)

      </code>

      <code>retrieveContext(temp1) </code>

      retrieveContext(temp1)
      

2. use safari’s devtools, the graphics tab. It will show at least 2d, webgl, webgl2, and bitmaprenderer canvases.

   Above you can see Canvas 1 is 2d, canvas 2 is WebGL, canvas 3 is WebGL2, canvas 4 is bitmaprenderer, and canvas 5 (webgpu) does not show up (they probably have not yet added WebGPU support for Safari Technology Preview)

3. dig through the code in your browser’s devtools

4. If you do control the page, monitor all the canvases with some code you run before all other code on the page.

   Plain text

   Copy to clipboard

   Open code in new window

   EnlighterJS 3 Syntax Highlighter

   <code>HTMLCanvasElement.prototype.getContext = (function(origFn) {

   return function(...args) {

   const ctx = origFn.call(this, ...args);

   if (ctx) {

   console.log(this, ctx.constructor.name);

   }

   return ctx;

   };

   })(HTMLCanvasElement.prototype.getContext);

   </code>

   <code>HTMLCanvasElement.prototype.getContext = (function(origFn) { return function(...args) { const ctx = origFn.call(this, ...args); if (ctx) { console.log(this, ctx.constructor.name); } return ctx; }; })(HTMLCanvasElement.prototype.getContext); </code>

   HTMLCanvasElement.prototype.getContext = (function(origFn) {
     return function(...args) {
       const ctx = origFn.call(this, ...args);
       if (ctx) {
         console.log(this, ctx.constructor.name);
       }
       return ctx;
     };
   })(HTMLCanvasElement.prototype.getContext);
   

5. If you don’t control the page you could try making an extension that injects that code above.

Note that this will not necessarily tell you if the page is using WebGL or not since they may be renderering offscreen and maybe passing the result to a bitmaprenderer canvas.

You could try injecting this code as well

OffscreenCanvas.prototype.getContext = (function(origFn) {
  return function(...args) {
    const ctx = origFn.call(this, ...args);
    if (ctx) {
      console.log(this, ctx.constructor.name);
    }
    return ctx;
  };
})(OffscreenCanvas.prototype.getContext);

But you’d need to inject it into the main page and all workers (harder)