Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Role of Canvas Javascript API in Major Browsers
The canvas JavaScript API is a powerful tool for creating and manipulating graphics on the web. It allows you to draw 2D graphics using JavaScript code and is supported by most modern web browsers. Game manipulation, animation, video processing, and many more are there from Canvas API.
The canvas API is implemented in the form of a canvas element, which is an HTML element that can be placed in an HTML document. The canvas element is used as a drawing surface and can be styled and positioned using CSS.
To draw graphics on the canvas, you can use the canvas API's drawing methods, such as arc, lineTo, and fillRect. These methods allow you to draw shapes, lines, and other graphics on the canvas.
Browser Support for Canvas API
Google Chrome and Mozilla Firefox are the browsers that mainly support the canvas API. Never use Safari or Microsoft Edge for canvas API. Other major browsers except Internet Explorer do support the canvas API.
Canvas works in windows, Linux, Mac, Android, and iOS with all major browsers. The operating system should do all security checks and upgrades to ensure the proper working of canvas API. A list of such browsers with versions is here.
Chrome
Firefox, but no support for extended releases
Edge
Respondus Lockdown Browser only supports the latest system requirements.
Safari only on Macintosh only
A system with at least 1GB of RAM is suitable for canvas API. Native mobile browsers have less support for tablet devices. Default android browser changes with mobile devices.
Mobile Browsers
iOS
Safari is the default browser having limited Canvas support.
Chrome
Photon Flash Player supports Flash
Android
Chrome is the default browser having limited Canvas support
Firefox
Screen Readers
Macintosh VoiceOver in the latest version of Safari
Personal Computer JAWS in the recent version of Firefox
Personal Computer NNVDAin latest version of Firefox
Chrome does not support a screen reader in canvas.
Code to Detect Canvas API Browser Support
Canvas is an HTML 5 element. The getContext() method in canvas returns the drawing context. If it returns null, that means the canvas element has no support.
Users can follow the syntax below to check whether a browser supports the canvas element with the code below.
Syntax
if(document.createElement('canvas').getContext){
/*Canvas object available*/
}
The if condition in the syntax creates a canvas element and tries to get the context. If the context returns, the browser support canvas.
Example
In this program, users can check the browser support for canvas with a button click. As you click the button, the event calls a function that tries to get the canvas context using the syntax above. A flag variable is here in the program to distinguish the browser support and display the message to the user.
<html>
<body>
<h2> Check if your browser support canvas API in JavScript </i>
</h2>
<button class="button" onclick="browserSupport()">
Check
</button>
<br> <br>
<b class="outputEl"> </b>
<script>
function browserSupport() {
if (document.createElement('canvas').getContext)
hasSupport = true;
else
hasSupport = false;
document.querySelector('.outputEl').innerHTML = hasSupport ? "Browser supports canvas" : "Browser does not support canvas";
}
</script>
</body>
</html>
Example
Here's an example of how you might use the canvas API to draw a simple circle on the canvas −
<html>
<body>
<p> Drawing a circle using Canvas JavaScript API </p>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.beginPath();
context.arc(95, 50, 40, 0, 2 * Math.PI);
context.stroke();
</script>
</body>
<html>
In this example, the canvas element is created with an id of "myCanvas" and a width and height of 200 and 100 pixels, respectively. The getContext method is used to get a drawing context for the canvas, and the arc method is used to draw a circle with a center point of (95, 50) and a radius of 40 pixels. The stroke method is then used to draw the circle on the canvas.
This tutorial helped us find whether the canvas API is a built-in native part of all major browsers. Not all major browsers have built-in canvas API. We now know a code to detect the browser support for the canvas API. Users can avoid errors while coding canvas with a prior browser supports checks using this code snippet.
192 Views
