displaying an analog clock in IE 8

[johncraw]

Hi. I have created an analog clock that I display on a page. I created it using Firefox as the browser, and used the <canvas> tag. However below version 9 the canvas tag is not supported in IE. To create the clock, I need to be able to draw the hands on the screen. Is there a way in IE 8 that I can dynamically draw lines overlayed on an image (the clock face)? I would like to have a solution that works on as many browsers as possible. Any aid would be appreciated. John Crawford

[justsomeguy]

This might be your best bet: http://code.google.com/p/explorercanvas/

[johncraw]

Thank you. I have downloaded the js file and most of the examples work. However my clock still does not. I will try to figure out what the problem is. But at least it is a start. John

[thescientist]

look in your error console, and try using breakpoints or logging to trace your code's execution flow to see what is going on and when.

[johncraw]

I did start to look at the debugger and the first failure is when I draw the background. In my .js I have:ctx.drawImage(backimage,0,0,CanvasWidth,CanvasHeight); //Add the image This calls a function in excanvas.js (contextPrototype.drawImage = function(image, var_args)) and fails in line 581:this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); I cannot see anything wrong with the the drawImage call, and I am still trying to figure out what the contextPrototype.drawImage function does. OK so I commented out the draw line to see if there were any other problems. This time it failed in the following line in my js:ctx.stroke(); This failed in line 765 of the excanvas.js (contextPrototype.stroke = function(aFill)), when I was trying to add one of the clock hands:this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); Again I don't see any problem with my stuff, since it works fine in Firefox. I realize that these problems are not in the scope of this forum, and I will try to look into it with the excanvas group. John

[thescientist]

you say it fails. but what are the errors? They should at least give you some clue, and in turn, can give us some insight.

[johncraw]

Sorry, however there is really very little information given. with the drawImage error the error message says:Webpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)Timestamp: Thu, 5 Apr 2012 22:54:12 UTCMessage: Invalid source HTML for this operation.Line: 581Char: 5Code: 0URI: file:///C:/E/HTML%20Data/Games/C_Games/excanvas.js The line 581 in excanvas.js isthis.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));The line in my js file isctx.drawImage(backimage,0,0,CanvasWidth,CanvasHeight); //Add the image The message with the stroke error isWebpage error detailsUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)Timestamp: Thu, 5 Apr 2012 22:59:55 UTCMessage: Invalid source HTML for this operation.Line: 765Char: 5Code: 0URI: file:///C:/E/HTML%20Data/Games/C_Games/excanvas.js The line 581 in excanvas.js is:this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));The line in my js file isctx.stroke(); As mentioned before, this works without a problem in Firefox 11.Now, I do not know if there is any way to get additional information. If there is , let me know and I will try to get anything else.I have also presented both problems to the excanvas group. John

[thescientist]

Is it possible to get a link to this page somewhere so we can check it out ourselves? I'm confused because in the first user agent snippet it says Mozilla, but you are saying the issue is only in IE, correct? Either way, it would be easier for us to be able to see it in action, preferable live.

[johncraw]

"If you make something foolproof, some dummy will find a way to break it."

The problem (if it was a problem) is solved! First of all nothing is run from the web. everything is local to my harddrive. I did anticipate someone asking for the failing code, so I spent this morning stripping it down to the bare minimum to show the problem. After stripping my javascript (and it still failed), I then went to the html file and stripped everything out except the canvas and the images. In developing this I want the clock in the middle of the screen. However there is other text on the screen that I want left as is. I tried:<style> canvas { text-align:center; }</style>It didn't work.This was the only way that I could get it to work the way I wanted: <p style="text-align:center;"> <!-- Define the canvas that the clock and hands will be placed on --> <canvas id="MMCanvas" width="300" height="300" style="border:1px solid #00ff00;" > YOUR BROWSER DOES NOT SUPPORT THE CANVAS TAG. </canvas> </p> When I removed the <p style="text-align:center;"> and </p> everything worked fine in IE. I tried to style the body to align center, and that also worked. Is there a better way to specify the center alignment, or do I center the body and then align everything left? I will update this problem in the excanvas problem I opened. I really do not know if it is a defect, or if it is just by luck that it works in Firefox. Thank you for your interest and help. John

[thescientist]

it's pretty simple to center with CSS. To center block level elements like <div> or <p>, you need to give the element a width (that is less than it's parent) and apply margin: 0px auto. This technique is commonly used to center websites, by putting all content in a wrapper <div> after the <body> and giving the wrapper the above CSS. To center inline elements, like <span>, <img>, and <a> you add text-align: center to the elements parent container.

[johncraw]

In response to your comment about the information that is returned with the error, specificallyUser Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) This is the User Agent information. Perhaps since my default browser is Firefox, Mozilla is added. However the highlighted part MSIE 8.0 indicates that it is IE and version 8. This is the User Agent when I am in FirefoxUserAgent: Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0 As to your comment about using CSS. I thought that that was what I was doing: <style>canvas{text-align:center;}</style> It works on body and p, but not on the canvas.BTW it doesn't work in Firefox or in IE, so I do not know what the problem is. Anyway, by centering the body and making the paragraphs align left, then tweaking where necessary I have the result that I need. Thanks John