Menu
I am using canvas element to draw curve along with text. It is working fine in chrome, Firefox, IE 9. But in IE 8,7 this is not working. Showing the error like:
SCRIPT438: Object doesn't support property or method 'getContext'
I searched in Google then i found Excanvas.js will figure out this problem, but I am getting the same error.
Thank you.
<head><!--[if IE]><script src="js/excanvas.js"></script><![endif]--></head>
My html canvas code:
<canvas id="myCanvas" width="679" height="290"></canvas>
My js code:
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();
781
You need to run your JS only when document is ready.
This may not be necessary for browsers supporting <canvas>, but for IE<9, excanvas.js works after document loaded, so you'll need to run your JS after that.
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
