2

I have an HTML/JavaScript SPA and I want to check whether Offscreen canvas is supported by the Browser or not.

I tried with

var canvasTest = document.createElement('canvas-test');

if(typeof canvasTest.transferControlToOffscreen === "function")
{
   return true;
}
else
{
   return false;
}

but it doesn't work (i.e. it returns false even though the Browser actually supports it)

I'm using this code to check if the function exists or not: How to check if function exists in JavaScript?

gman
  • 100,619
  • 31
  • 269
  • 393
Gianluca Ghettini
  • 11,129
  • 19
  • 93
  • 159

2 Answers2

5

you can check the prototype of the canvas which is a much more lightweight way to check than creating a canvas element.

if (HTMLCanvasElement.prototype.transferControlToOffscreen) {
  console.log('support for transferring control of an offscreen canvas exists');
} else {
  console.log('support for transferring control of an offscreen canvas does NOT exist');
}

Note that OffscreenCanvas and support for transferring a canvas to an offscreen canvas are technically not the same thing. It's possible though probably 0% chance of possibility for a browser to support OffscreenCanvas and not support transferring a canvas's control to one. So technically to check for OffscreenCanvas support you'd do this

if (typeof OffscreenCanvas !== 'undefined') {
  console.log('OffscreenCanvas is supported');
} else {
  console.log('OffscreenCanvas is NOT supported');
}
gman
  • 100,619
  • 31
  • 269
  • 393
4

The problem with your code is that you create a canvas-test dom element, which is not the same as canvas.

Try this.

var canvasTest = document.createElement('canvas');

if(typeof canvasTest.transferControlToOffscreen === "function")
{
   console.log('true');
}
else
{
   console.log('false');
}
Exceptional NullPointer
  • 778
  • 1
  • 9
  • 21