canvas element seems to be disabled
I've used a canvas element to show a map with patches that are colored according to values obtained from a MySQL query and written into a javascript array. It works fine on my two computers, in Firefox开发者_C百科 4, IE 9, and Safari. But when I did a demo at school, with both IE 8 (maybe that would be a problem) and Firefox 3.6 (should work) the canvas was not visible. I can't see any way it can even be disabled! What have the IT guys at the school done, and how can I test for it and draw a regular image map instead?
IE8 doesn't support canvas. You can use excanvas to emulate it.
Second, IIRC, browsers are not obliged to set canvas width and height to any value. You may try to set width and height attributes.
UPD: It will be nice if you provide a fragment of your page. Before you do this, some ideas on how to narrow problem.
Ensure that your page doctype is set to
<!doctype html>.Ensure that no messages about
canvasbeing not supported (i.e. text put between<canvas>and</canvas>) are displayed (it shouldn't happen with Firefox 3.6, but nevertheless).Set
style='border:solid;'for your canvas element. Check if border is drawn at expected position.Enclose
canvasintodivelement and make sure it is displayed at expected position (e.g. by settingstyle='border:solid;'for it as well).
If border for canvas and/or wrapping element is displayed but there's no drawing, then there's some error with drawing code. If it is not then there's problem with element positioning (e.g. CSS went wild) or loading document per se.
UPD: I ran site with Firebug enabled and it shown an exception at drawImage call.
img.src = 'images/snap9.jpg';
ctx.drawImage(img,0,0); // HERE!
But only for the first load of page in the browser session.
The reason is (I guess) that when you set src to image address, it is not loaded immediately, and drawing it impossible until then. So exeption is thrown and the rest of coded is not executed.
You should set onload handler for images (see here) and do the rest of drawing in this handler.
Let me know if it helps.
加载中,请稍侯......
精彩评论