This simple Canvas script creates a rectangle with a border and text. It works in Chrome and FireFox. But the text does not work in Internet Explorer 7.0. I have included excanvas.js; for this reason the rectangle and border show up in IE 7. However, the text is not showing up in IE 7. I want to know if it is possible to get this simple script to work in IE 7 and 8?
<!DOCTYPE html>
<html lang="en">
<head>
<link href = "style.css" type = "text/css" rel = "stylesheet" />
<script src="js/excanvas.js" type="text/javascript"></script>
<script type="text/javascript">
function addBox(){
var c = document.getElementById("myCanvas");
context=c.getContext("2d");
//Inner rectangle with shadow
context.fillStyle = 'red';
context.shadowColor="brown";
context.shadowBlur = 20;
context.fillRect(402,227,96.5,48.5);
context.shadowColor = null;
context.shadowBlur = null;
//Outer Rectangle
context.lineWidth = '5';
context.strokeStyle='green';
context.strokeRect(400,225,100,50); //draws just the edges of a rectangle
//font
context.font = '17px Arial';
context.textBaseline = 'top';
context.fillStyle = 'black';
context.fillText ('hello', 433, 243);
}
</script>
</head>
<body onload="addBox()">
<canvas id="myCanvas" width="900" height="500">Your browser does not support the canvas element.</canvas> <br />
<script type="text/javascript">
c = document.getElementById("myCanvas");
cxt4=c.getContext("2d");
resetCanvas();
</script>
</body>
</html>
I just tried this on mine and had the same results. Then I found that I was using an earlier revision of excanvas. Ran the code again with this version and it worked in IE8. Haven’t tested on IE7 but with some luck it will work.
Steve