dianping/cat · critical · Error

Canvas is not available. If you're using IE with a fall-back

Error message

Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.

What it means

Flot draws into an HTML5 canvas; on old IE it can fall back to Excanvas/Flashcanvas via window.G_vmlCanvasManager. When a created canvas element has no getContext method AND no canvas-fallback shim is loaded, flot throws this error explaining the two usual root causes: a broken conditional include of excanvas, or the page rendering in Quirks Mode (missing DOCTYPE) which breaks canvas shims.

Source

Thrown at cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js:85

	function Canvas(cls, container) {

		var element = container.children("." + cls)[0];

		if (element == null) {

			element = document.createElement("canvas");
			element.className = cls;

			$(element).css({ direction: "ltr", position: "absolute", left: 0, top: 0 })
				.appendTo(container);

			// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas

			if (!element.getContext) {
				if (window.G_vmlCanvasManager) {
					element = window.G_vmlCanvasManager.initElement(element);
				} else {
					throw new Error("Canvas is not available. If you're using IE with a fall-back such as Excanvas, then there's either a mistake in your conditional include, or the page has no DOCTYPE and is rendering in Quirks Mode.");
				}
			}
		}

		this.element = element;

		var context = this.context = element.getContext("2d");

		// Determine the screen's ratio of physical to device-independent
		// pixels.  This is the ratio between the canvas width that the browser
		// advertises and the number of pixels actually present in that space.

		// The iPhone 4, for example, has a device-independent width of 320px,
		// but its screen is actually 640px wide.  It therefore has a pixel
		// ratio of 2, while most normal devices have a ratio of 1.

		var devicePixelRatio = window.devicePixelRatio || 1,
			backingStoreRatio =

View on GitHub (pinned to e815e74d4c)

Solutions

  1. Add <!DOCTYPE html> as the very first line of the JSP/HTML page to force standards mode.
  2. Include excanvas.min.js (via <!--[if lt IE 9]><script src="...excanvas.min.js"></script><![endif]-->) BEFORE jquery.flot.js.
  3. On browsers where canvas is expected, test support once and show a graceful message instead of the chart.

Example fix

// before
<html> <!-- no doctype, IE quirks mode -->

// after
<!DOCTYPE html>
<html>
<head>
  <!--[if lt IE 9]>
    <script src="assets/js/uncompressed/flot/excanvas.min.js"></script>
  <![endif]-->
  <script src="assets/js/uncompressed/flot/jquery.flot.js"></script>
Defensive patterns

Strategy: validation

Validate before calling

function canvasSupported() {
  var c = document.createElement('canvas');
  return !!(c.getContext && c.getContext('2d')) || !!window.G_vmlCanvasManager;
}
if (!canvasSupported()) {
  showFallbackMessage('Charts need HTML5 canvas or excanvas on IE<=8.');
} else {
  $.plot('#chart', data, opts);
}

Type guard

function canvasSupported() {
  var c = document.createElement('canvas');
  return typeof c.getContext === 'function' || typeof window.G_vmlCanvasManager !== 'undefined';
}

Prevention

When it happens

Trigger: Running the chart page in IE8/9 without excanvas.js loaded; including excanvas only in conditional comments that fail (e.g. after flot, or in the wrong conditional); page has no <!DOCTYPE html> so IE uses Quirks Mode and even the shim fails; the canvas element created inside a malformed container.

Common situations: Legacy intranet apps (like this CAT webapp) that must support old IE; templates whose DOCTYPE was dropped when refactoring; bundling that drops the <!--[if lt IE 9]> excanvas include.

Related errors

AI-assisted analysis of dianping/cat@e815e74d4c (2026-08-14). Data as JSON: /api/errors/51ecc052804e0551. Report an issue: GitHub.