Html5 canvas and IE 7,8 problem

Question

0.00/5 (No votes)

See more:

Hi,
I have a serious problem in my Jquery + .Net project.
Here I use a html canvas to draw some circles using jquery. Its runs fine in all browsers except IE 7,8,9. When i debug the section of code I see an exception occurs and the message is "object error". My code is

<script src='~/js/excanvas.js' type="text/javascript"></script>

var canvas = document.getElementById('My_canvas');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var context = canvas.getContext('2d');

centerX and centerY shows the right values but when it executes the next then got the error.

Please help me to run it in IE family.
Thanks:)

I use
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
but get the same error Error: Object doesn't support this property or method.

Posted 17-Dec-12 18:51pm

Manojit Mondal

Updated 17-Dec-12 19:04pm

v2

Add a Solution

3 solutions

Solution 1

HTML 5 is supported only on IE v9 and above.
Check this link to test the features supported by your browser.
http://html5test.com/[^]

Posted 17-Dec-12 19:11pm

adi007me_syn

Comments

Manojit Mondal 18-Dec-12 1:17am

Yes I see that but there is no way to do this?

adi007me_syn 18-Dec-12 1:23am

Depends upon what you want to do. Give some more details.

Manojit Mondal 18-Dec-12 1:45am

Is not there any js present to support the 2d functions on IE 7,8?

adi007me_syn 18-Dec-12 2:39am

You can use jquery but its very limited, thats why I asked about the requirement.
I am not aware of any script which imitates the Canvas functionality.
You can check below link, but I have never tried this.
http://code.google.com/p/explorercanvas/

Manojit Mondal 18-Dec-12 4:36am

Its works........:)

adi007me_syn 18-Dec-12 4:45am

Gr88

Solution 2

A Developer’s Guide to HTML5 Canvas[^]
HTML5 Canvas[^]
make sure you defined height/width in java script.
also correct this 'My_canvas' to "My_canvas"
also

adi007me_syn :
HTML 5 is supported only on IE v9 and above.

Also I tried your given code and it runs successfully in Internet Explorer version 9.08112.16421 i.e. IE9

Quote:

Browser Support for HTML5<br />
 <br />
HTML5 is not yet an official standard, and no browsers have full HTML5 support.<br />
 <br />
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

and HTML5 & CSS3 Support[^] best describes that-

Quote:
no browsers have full HTML5 support.

I think you should update your browser.

Posted 17-Dec-12 19:14pm

Abhishek Pant

Updated 17-Dec-12 20:26pm

v3

Comments

Manojit Mondal 18-Dec-12 1:53am

Yes but when I create a test page like
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>
it does not run on IE 7,8 .
got the same error.

Abhishek Pant 18-Dec-12 2:27am

check my updated solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Manojit Mondal · Accepted Answer · 2012-12-17T22:36:00

Thank you adi007me_syn,
I check your last link and this is working in IE 7 also.
But I solved it by myself.
There is some problem in my excanvas.js I think.
I download its latest version for IE family also from http://code.google.com/p/canvas-text/source/browse/trunk/excanvas.js

And change my code

function initCanvas(canvas) {
if (window.G_vmlCanvasManager && window.attachEvent && !window.opera) {
canvas = window.G_vmlCanvasManager.initElement(canvas);
}
return canvas;
}
window.onload = function(){
var canvas = initCanvas(document.getElementById('My_canvas')),
ctx = canvas.getContext('2d');
ctx.strokeStyle = "rgba(255,0,0,1)";
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.lineWidth = 1;
ctx.font = "20pt Verdana, sans-serif";
ctx.translate(60, 60);
ctx.fillText('Horizontal', 0, 0);

And it works.
Cheers.:)