Feature Detection

Welcome to our free JavaScript tutorial. This tutorial is based on Webucator's Introduction to JavaScript Training course.

Contact Us or call 1-877-932-8228
Feature Detection

Feature Detection

Although browsers have come a long way in the past several years, they unfortunately do not all support the W3C specifications to the same degree. This is particularly true with the introduction of HTML5. It is often necessary to branch the code based on the browser's support of a feature. A case in point is the HTML5 canvas element, which is used to create drawings natively in the browser. Take a look at the following code:

Code Sample:

<meta charset="UTF-8">
function drawPath() {
	var canvas=document.getElementById("my-canvas");
	if (canvas.getContext) {
		alert("Canvas Supported.");
		//create your awesome drawing here
	} else {
		alert("Canvas Not Supported.");	
<canvas id="my-canvas" height="200" width="200">Your browser doesn't support canvas.</canvas>
<button onclick="drawPath();">Draw</button>

Code Explanation

If the browser properly supports canvas, it will recognize the getContext method of the canvas object and execute the code in the if condition.

The major advantage of checking for the feature rather than checking for the type or version of the browser is that you don't have to keep updating your code to account for changes in browser versions and support.


This tutorial is based on Webucator's Introduction to JavaScript Training Course. We also offer many other JavaScript Training courses. Sign up today to get help from a live instructor.