Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check the OffscreenCanvas is supported by the Browser or not in JavaScript?
In HTML, Canvas is very important when we want to show animation or 3D objects on the webpage using only HTML and JavaScript.
The OffscreenCanvas allows users to render animations and graphics off-screen. It means when we use regular canvas, it interacts with the user via the main thread of the web application, but OffscreenCanvas runs in a separate thread. This improves application performance by preventing graphics rendering from blocking the main UI thread.
Before using OffscreenCanvas, we need to check if it's supported by the browser. Otherwise, we should fall back to regular canvas. Let's explore two approaches to detect OffscreenCanvas support.
Using the typeof Operator
The typeof operator checks if the OffscreenCanvas constructor exists. If it returns "undefined", the browser doesn't support it.
Syntax
if (typeof OffscreenCanvas === "undefined") {
// not supported
} else {
// supported
}
Example
When the user clicks the button, it checks OffscreenCanvas support and displays the result:
<html>
<body>
<h3>Using the typeof operator to check OffscreenCanvas support</h3>
<button onclick="isSupported()">Check OffscreenCanvas Support</button>
<p id="output"></p>
<script>
let output = document.getElementById("output");
function isSupported() {
if (typeof OffscreenCanvas === "undefined") {
output.innerHTML = "OffscreenCanvas is NOT supported in this browser!";
} else {
output.innerHTML = "OffscreenCanvas is supported in this browser!";
}
}
</script>
</body>
</html>
Using transferControlToOffscreen Method
We can create a canvas element and check if the transferControlToOffscreen() method exists. This method transfers control of a regular canvas to an OffscreenCanvas, so its presence indicates OffscreenCanvas support.
Syntax
var canvas = document.createElement("canvas");
if (typeof canvas.transferControlToOffscreen !== "function") {
// Browser doesn't support OffscreenCanvas
} else {
// Browser supports OffscreenCanvas
}
Example
This example creates a canvas element and checks if the transferControlToOffscreen method is available:
<html>
<body>
<h3>Using transferControlToOffscreen to check OffscreenCanvas support</h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
function checkSupport() {
var canvas = document.createElement("canvas");
if (typeof canvas.transferControlToOffscreen !== "function") {
output.innerHTML = "OffscreenCanvas is NOT supported in this browser!";
} else {
output.innerHTML = "OffscreenCanvas is supported in this browser!";
output.innerHTML += "<br>Type: " + typeof canvas.transferControlToOffscreen;
}
}
checkSupport();
</script>
</body>
</html>
Comparison
| Method | What it checks | Reliability |
|---|---|---|
typeof OffscreenCanvas |
Constructor existence | Direct and simple |
transferControlToOffscreen |
Method availability | More comprehensive |
Browser Compatibility
OffscreenCanvas is supported in modern browsers including Chrome 69+, Firefox 105+, and Safari 16.4+. It's not supported in Internet Explorer.
Conclusion
Both approaches effectively detect OffscreenCanvas support. The first method is simpler and directly checks the constructor, while the second validates actual functionality. Use either approach before implementing OffscreenCanvas features.
587 Views
