HTML5 Canvas not displaying in browser

Question

I'm following this tutorial to learn HTML5 game development using javascript and jQuery. However, I've already come across a problem. When I run the HTML page that my js file is referenced from, nothing loads, and is just a blank screen. Here is the code for both files. Note that I haven't gotten very far in the tutorial.

index.html

<HTML>
<head>
</head>
<body>
<p>HTML5 and jQuery Tests</p>
<script type ="text/javascript" src="test.js"></script>
</body>
</HTML>

test.js

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;

var canvasElement = $("<canvas width='" + CANVAS_WIDTH +"' height='" + CANVAS_HEIGHT +        "'></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo('body');
var FPS = 30;
setInterval(function() {
update();
draw();
}, 1000/FPS);
function draw() {
canvas.fillStyle = "#000"; 
canvas.fillText("hello.", 50, 50);
}

Any help would be greatly appreciated! Also, am I allowed to ask questions about this code in this forum, on the same thread, or do I have to stat another?

Thanks! ~Carpetfizz

You havnt added any jquery.js. But it seems you have added its functionality. — user2193789
– user2193789, Commented Mar 31, 2013 at 10:35
@silentboy is there anything I have to do to let the browser know that I'm using jquery and not normal javascript? Shouldn't browsers be smart enough to tell the difference? — Carpetfizz
– Carpetfizz, Commented Mar 31, 2013 at 19:44
I know it is too late but today my hsc exam started. Sorry for late reply but someone has edited his answer and it tell what you needed. However, jquery is a javascript library means that jquery is written with javascript. I think if there a special case exist then a browser may implement it. But all major browser havnt implement it by default. So, if you use prototype.js, jquery.js, dojo, yui etc in your project then you must add that library. So, if the machine arent smart, you have to be. Thanks to all — user2193789
– user2193789, Commented Apr 1, 2013 at 8:00

LetterEh · Accepted Answer · 2013-03-31 21:17:35Z

2

You don't have an update function to call. When the setInterval fires (which is ~32ms after the script loads), you're getting an error.

You need to add jQuery.
It's a library that was written to make working with HTML easier.
It needs to exist above where test.js does.

You can either download your own copy of it, or link to a copy elsewhere on the net - both will work fine.

$ is used by jQuery as a function to intelligently grab different kinds of items: HTML, JS, etc, and return JS objects with helpful functions for working with whatever you asked for.

Anyway, the update would still have caused an error, it was just second in line, behind the missing script.

edited Mar 31, 2013 at 21:17

answered Mar 31, 2013 at 4:35

LetterEh

26.8k5 gold badges45 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Carpetfizz Over a year ago

ah this makes sense, in the tutorial however, I see no update function at all! could this be a mistake in their editing or is it intentional? also, what would an update() function look like?

LetterEh Over a year ago

@Carpetfizz the function update { /*...*/ } is defined right below the window that has your setTimeout listed. It doesn't need to have anything in it, to work right now... ...it just needs to exist, in order to not crash. But basically, if you think about a typical videogame, update will listen for player movement, will update the positions of everything in "space", figure out score-changes, sync up online stuff, deal damage, award points, figure out if you beat the level, do enemy AI, etc... draw will then paint everything that was repositioned, and texture it and light it, etc...

Carpetfizz Over a year ago

Thanks for the answer, but adding "function update() {}" didn't do anything. As an attempt to debug, I just double clicked the ".js" file and got this error from "Windows Script Host": "Line: 4", "Char: 1", Error: "Object expected", Code: "800A138F", Source: "Microsoft JScript runtime error"

LetterEh Over a year ago

@Carpetfizz You should be debugging inside of either Chrome Developer Tools, Firefox Developer Tools or Firebug. The first two are built into the browsers - personally, I recommend using Chrome for 90% of the debugging/development, and then doing compatibility testing on the others. Double-clicking on it had Windows trying to run the .js file in Windows...

Carpetfizz Over a year ago

Ah cool! I did this in Chrome, and got an actual error: Uncaught ReferenceError: $ is not defined

|

Collectives™ on Stack Overflow

HTML5 Canvas not displaying in browser

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related