In this article I will explain with example, how to use HTML5 Canvas in Internet Explorer browser versions 7 and 8 i.e. IE7 and IE8.
HTML5 Canvas is not supported in Internet Explorer browser versions 7 and 8 i.e. IE7 and IE8 and in order to use HTML5 Canvas, Excanvas also known as Explorer Canvas is used.
Normal way of using HTML5 Canvas
The following HTML Markup consists of HTML5 Canvas element. Inside the window.onload event handler, a circle with some text is drawn in the HTML5 Canvas element.
<canvas id="Canvas" width = "200" height = "200">
</canvas>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById('Canvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
context.fillStyle = "#0090CB";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#FFF";
context.font = "50px Arial";
context.fillText("ASP", 50, 120);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "#fff";
context.stroke();
}
</script>
The above script works fine in Internet Explorer 9 (IE9) or higher versions, but in Internet Explorer browser versions 7 and 8 i.e. IE7 and IE8, following error occurs.
![Excanvas Example: Using HTML5 Canvas in Internet Explorer versions 7 and 8 (IE7 and IE8) using Excanvas]()
Using HTML5 Canvas in Internet Explorer versions 7 and 8 (IE7 and IE8) using Excanvas
If you want to use HTML5 Canvas in Internet Explorer browser versions 7 and 8 i.e. IE7 and IE8, then you need to use HTML DIV element instead of HTML5 Canvas element as it is not supported.
Then a Canvas element is dynamically created using JavaScript and appended to the HTML DIV element.
Now the Canvas element is converted into HTML5 Canvas using the initElement method of Excanvas library.
Further the Canvas element can be used in normal way as it is done in Internet Explorer browser versions that support HTML5 Canvas.
<div id = "dvCanvas">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () {
//Fix for IE 7 and 8
var canvas = document.createElement('canvas');
canvas.height = "200";
canvas.width = "200";
document.getElementById("dvCanvas").appendChild(canvas);
if ($.browser.msie && ($.browser.version == "7.0" || $.browser.version == "8.0")) {
G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
context.fillStyle = "#0090CB";
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#FFF";
context.font = "50px Arial";
context.fillText("ASP", 50, 120);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 5;
context.strokeStyle = "#fff";
context.stroke();
}
</script>
Screenshot
![Excanvas Example: Using HTML5 Canvas in Internet Explorer versions 7 and 8 (IE7 and IE8) using Excanvas]()
Demo
Downloads
Download Code
