Jump to content

HTML5 and Canvas element problem


afish674

Recommended Posts

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...