afish674 Posted May 3, 2012 Share Posted May 3, 2012 Hi guys, I'm using the HTML 5 boilerplate and trying to follow some instructions from a text book but nothing is drawn. Firebug says "document.getElementById is not a function" but it is! Confused. Any help appreciated. Thanks! <!doctype html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="HTML5 boilerplate v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/css/style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script src="HTML5 boilerplate v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/plugins.js"></script> <script src="HTML5 boilerplate v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/script.js"></script> <script src="HTML5 boilerplate v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/libs/modernizr-2.5.3.min.js"></script></head><body> <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--> <header><h1>Canvas Test</h1> </header> <div role="main"><canvas id="logo" width="900" height="80"> <h1>AwesomeCo</h1> </canvas> <script type="text/javascript">var drawLogo = function(){var canvas = document.getElementById("logo");var context = canvas.getContext("2d");context.font = 'italic 40px sans-serif';context.textBaselibe ='top';content.fillText("AwesomeCo", 60, 0);};$(document).ready(function(){ var canvas = document.getElementByID("logo"); if (canvas.getContext){ drawLogo(); }});</script> </div> <footer> </footer></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2012 Share Posted May 3, 2012 That can't happen unless one of the applications you loaded has overwritten the document or getElementById() properties. Could you provide a test page we can check? Link to comment Share on other sites More sharing options...
eTianbun Posted May 3, 2012 Share Posted May 3, 2012 (edited) $(document).ready(function(){var canvas=document.getElementByID('logo');})Letter marked with RED should be lowercase (small letter). Edited May 3, 2012 by eTianbun Link to comment Share on other sites More sharing options...
afish674 Posted May 3, 2012 Author Share Posted May 3, 2012 Thanks for the replies. eTianbun - I just tried changing that and it still didn't work unfortunatly. Ingolme - It is only a local test page but i've hosted it on my dropbox for you to have a look at: http://dl.dropbox.com/u/13032629/canvas_test.html Thanks again. Link to comment Share on other sites More sharing options...
Ingolme Posted May 3, 2012 Share Posted May 3, 2012 Unfortunately, you're missing a bunch of included files in the link you gave "NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/plugins.js"plugins.js"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/script.js"script.js"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/css/style.css"style.css"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/libs/modernizr-2.5.3.min.js"modern....min.js"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/plugins.js"plugins.js"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/script.js"script.js"NetworkError: 404 NOT FOUND - http://dl.dropbox.com/u/13032629/HTML5%20boilerplate%20v3/Stripped/h5bp-html5-boilerplate-v3.0.2stripped-0-g5f341a3/h5bp-html5-boilerplate-359a13f/js/libs/modernizr-2.5.3.min.js"modern....min.js Link to comment Share on other sites More sharing options...
afish674 Posted May 3, 2012 Author Share Posted May 3, 2012 Sorry about that. I don't think any of those files are relavent though. They're just part of the boilerplate. I've taken them out now. http://dl.dropbox.com/u/13032629/canvas_test.html Is that any better? Link to comment Share on other sites More sharing options...
birbal Posted May 3, 2012 Share Posted May 3, 2012 opening up the page showes up me a error in firebug herecontent.fillText("AwesomeCo", 60, 0);you have a typo there. content should be context. Link to comment Share on other sites More sharing options...
afish674 Posted May 4, 2012 Author Share Posted May 4, 2012 Thanks! There was also a typo here: context.textBaselibe ='top'; That I didn't notice. Link to comment Share on other sites More sharing options...
afish674 Posted May 4, 2012 Author Share Posted May 4, 2012 opening up the page showes up me a error in firebug Out of interest, where did it show that error in firebug? because I didn't see it! Link to comment Share on other sites More sharing options...
birbal Posted May 4, 2012 Share Posted May 4, 2012 you have to open the firebug before you load it. if you load the site first and then open firebug you wont see anything. Link to comment Share on other sites More sharing options...
Ingolme Posted May 4, 2012 Share Posted May 4, 2012 Yes, you have to open the "Console" tab, then reload the page. Link to comment Share on other sites More sharing options...
afish674 Posted May 4, 2012 Author Share Posted May 4, 2012 Thanks for your help guys! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now