有两种流行的方法可以检测浏览器中的画布支持：
马特(Matt)建议检查的存在getContext，并由Modernizr库以类似方式使用：
var canvasSupported = !!document.createElement("canvas").getContext;
检查HTMLCanvasElement接口的存在，如WebIDL和HTML规范所定义。IE 9团队的博客文章中也推荐了这种方法。
var canvasSupported = !!window.HTMLCanvasElement;
我的建议是后者的一种变体(请参阅附加说明)，原因如下：
每个已知的支持canvas的浏览器(包括IE 9)都实现此接口；
简洁明了，立即可见代码在做什么；
在所有浏览器中，此getContext方法的速度明显慢，因为它涉及创建HTML元素。当您需要压缩尽可能多的性能时(例如，在类似Modernizr的库中)，这不是理想的选择。
使用第一种方法没有明显的好处。两种方法都可以被欺骗，但这不太可能偶然发生。
附加条款
仍然有必要检查2D上下文是否可以检索。据报道，某些移动浏览器可以为上述两项检查返回true，但是null为.getContext('2d')。这就是为什么Modernizr还检查的结果的原因.getContext('2d')。但是，WebIDL和HTML再次为我们提供了另一个更好，更快的选择：
var canvas2DSupported = !!window.CanvasRenderingContext2D;
请注意，我们可以完全跳过对canvas元素的检查，而直接检查2D渲染支持。该CanvasRenderingContext2D接口也是HTML规范的一部分。
您必须使用这种getContext方法来检测WebGL的支持，因为即使浏览器可能支持WebGLRenderingContext，getContext()但如果由于驱动程序问题而导致浏览器无法与GPU交互并且没有软件实现，则浏览器可能会返回null。在这种情况下，首先检查接口可让您跳过以下检查getContext：
var cvsEl, ctx;
if (!window.WebGLRenderingContext)
window.location = "http://get.webgl.org";
else {
cvsEl = document.createElement("canvas");
ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");
if (!ctx) {
// Browser supports WebGL, but cannot create the context
}
}
性能比较
该getContext方法的性能在Firefox 11和Opera 11中降低了85-90％，在Chromium 18中降低了约55％。