{"record":{"id":"51ecc052804e0551","repo":"dianping/cat","slug":"canvas-is-not-available-if-you-re-using-ie-with-a","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js","lineNumber":85,"sourceCode":"\tfunction Canvas(cls, container) {\n\n\t\tvar element = container.children(\".\" + cls)[0];\n\n\t\tif (element == null) {\n\n\t\t\telement = document.createElement(\"canvas\");\n\t\t\telement.className = cls;\n\n\t\t\t$(element).css({ direction: \"ltr\", position: \"absolute\", left: 0, top: 0 })\n\t\t\t\t.appendTo(container);\n\n\t\t\t// If HTML5 Canvas isn't available, fall back to [Ex|Flash]canvas\n\n\t\t\tif (!element.getContext) {\n\t\t\t\tif (window.G_vmlCanvasManager) {\n\t\t\t\t\telement = window.G_vmlCanvasManager.initElement(element);\n\t\t\t\t} else {\n\t\t\t\t\tthrow 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.\");\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis.element = element;\n\n\t\tvar context = this.context = element.getContext(\"2d\");\n\n\t\t// Determine the screen's ratio of physical to device-independent\n\t\t// pixels. This is the ratio between the canvas width that the browser\n\t\t// advertises and the number of pixels actually present in that space.\n\n\t\t// The iPhone 4, for example, has a device-independent width of 320px,\n\t\t// but its screen is actually 640px wide. It therefore has a pixel\n\t\t// ratio of 2, while most normal devices have a ratio of 1.\n\n\t\tvar devicePixelRatio = window.devicePixelRatio || 1,\n\t\t\tbackingStoreRatio =","sourceCodeStart":67,"sourceCodeEnd":103,"githubUrl":"https://github.com/dianping/cat/blob/e815e74d4c2dd74edac831241f1253fcc7d25381/cat-home/src/main/webapp/assets/js/uncompressed/flot/jquery.flot.js#L67-L103","documentation":"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.","triggerScenarios":"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 so IE uses Quirks Mode and even the shim fails; the canvas element created inside a malformed container.","commonSituations":"Legacy intranet apps (like this CAT webapp) that must support old IE; templates whose DOCTYPE was dropped when refactoring; bundling that drops the ) BEFORE jquery.flot.js.","On browsers where canvas is expected, test support once and show a graceful message instead of the chart."],"exampleFix":"// before\n \n\n// after\n\n\n\n \n ","handlingStrategy":"validation","validationCode":"function canvasSupported() {\n var c = document.createElement('canvas');\n return !!(c.getContext && c.getContext('2d')) || !!window.G_vmlCanvasManager;\n}\nif (!canvasSupported()) {\n showFallbackMessage('Charts need HTML5 canvas or excanvas on IE<=8.');\n} else {\n $.plot('#chart', data, opts);\n}","typeGuard":"function canvasSupported() {\n var c = document.createElement('canvas');\n return typeof c.getContext === 'function' || typeof window.G_vmlCanvasManager !== 'undefined';\n}","tryCatchPattern":null,"preventionTips":["Always start JSP/HTML templates with .","Include excanvas via IE conditional comments before flot on legacy-IE-supported pages.","Feature-detect canvas once and hide chart containers with a message when unsupported."],"tags":["flot","canvas","ie","quirks-mode","doctype","vendor"],"backgroundTag":null,"analyzedSha":"e815e74d4c2dd74edac831241f1253fcc7d25381","analyzedAt":"2026-08-14T14:22:34.512Z","schemaVersion":2},"datasetVersion":"2026-08-15T17:31:12.345Z"}