Geek Answers Handbook

Object does not support getContext property or method in versions of IE 9 below

I use the canvas element to draw a curve along with the text. It works fine in Chrome, Firefox, IE 9. But in IE 8.7 this does not work. Error display as:

SCRIPT438: object does not support property or method 'getContext'

I searched on Google and then found that Excanvas.js this problem, but I am getting the same error.

Thanks.

<head><!--[if IE]><script src="js/excanvas.js"></script><![endif]--></head>

My canvas HTML code:

 <canvas id="myCanvas" width="679" height="290"></canvas>

My JS code is:

 function drawTextAlongArc(context, str, centerX, centerY, radius, angle) { var len = str.length, s; context.save(); context.translate(centerX, centerY); context.rotate(-1 * angle / 2); context.rotate(-1 * (angle / len) / 2); for(var n = 0; n < len; n++) { context.rotate(angle / len); context.save(); context.translate(0, -1 * radius); s = str[n]; context.fillText(s, 0, 0); context.restore(); } context.restore(); } var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'), centerX = canvas.width / 2, centerY = canvas.height + 40, angle = Math.PI * 0.8, radius = 250; context.font = 'bold 30pt Ubuntu'; context.textAlign = 'center'; context.fillStyle = 'orange'; context.strokeStyle = '#336699'; context.lineWidth = 10; drawTextAlongArc(context, 'Sustainable Skill Solutions', centerX, centerY, radius, angle); // draw circle underneath text context.arc(centerX, centerY, radius +70, 0, 2 * Math.PI, false); context.stroke();
+5
source share
1 answer

You need to start JS only when the document is ready.

This may not be necessary for browsers that support <canvas> , but for IE <9, excanvas.js works after the document, so after that you will need to start JS.

Change your JS to:

 function drawTextAlongArc() { /* ... */ } function onLoad() { var canvas=document.getElementById("myCanvas"), context=canvas.getContext("2d"); /* ... */ } if(window.addEventListener) { window.addEventListener("load",onLoad,false); } else if(window.attachEvent) { window.attachEvent("onload",onLoad); }
+5
source

More articles:


All Articles