Why does my IE9 does not support canvas?
DiveIntoHTML5 Canvas claims that IE9 supports canvas.
However, when I tried doing canvas on IE9, it doesn't work:
Object doesn't support property or method 'getContext'
I'm using IE9.0.8112.16421:
This is the code:
<html>
<head>
</head>
<body style="background:black;margin:0;padding:0;">
<canvas id="canvas" style="background:white;width:100%;height:100%;">noob</canvas>
<script>
var img=new Image();
img.onload=function(){
var c=document.getElementById('canvas');
var ctx = c.getContext('2d');
var left,top;
left=top=0;
ctx.drawImage(img,left,top,20,20);
var f=function(){
left+=1;
top+=1;
c.width=c.width;
ctx.drawImage(img,left,top,20,20);
};
setInterval(f,20);
};
img.src="http://a.wearehugh.com/dih5/aoc-h.png";
</script>
</body>
</html>
Answer
Two things:
The <canvas> tag should having a corresponding closing tag </canvas>. While some browsers will let you get by with just an opening tag, others (such as Firefox, and perhaps IE) won't.
In addition, IE9 requires you to declare an HTML5 doctype to use the canvas tag. You can do this by placing <!DOCTYPE html> at the top of your code.