Problem with HTML5/JavaScript

Place for questions and answers for all newcomers and new coders. This is a free for all forum, no question is too stupid and to noob.
Post Reply
User avatar
Miroidan
Posts: 53
Joined: Sat Sep 27, 2014 7:23 pm

Problem with HTML5/JavaScript

Post by Miroidan »

When I visit my index.html all I get is a blank screen. I can change the background color and title of the website but I cannot 'render' anything from the .js files. Does this have to do anything with Ubuntu 14.04? I used gedit(ubuntu text editor) and it appeared no errors in the web console.

index.html

Code: Select all

<!DOCTYPE html>
<html xlmns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>HTML5 Canvas</title>
<style type="text/css">
* {margin:0;padding:0;}

html, body
{
	background-color: #FFF;
	overflow: hidden;
	height: 100%
}
</style>
</head>
<body>
<canvas id="canvas">
	Your browser does not support HTML5 canvas. If you would like to view, please update your browser.
</canvas>

<script src="rectangle.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js

Code: Select all

var canvas 		= document.getElementById("canvas");
canvas.width 		= document.body.clientWidth;
canvas.height      	= document.body.clietHeight;
canvas.style.width 	= canvas.width + "px";
canvas.style.height	= canvas.height + "px";

var ctx 		= canvas.getContext('2d');

var rect = new Rectangle(15, 15, 50, 50);
setInterval(function()
{
	rect.Draw(ctx);
}, 33);
rectangle.js

Code: Select all

Rectangle = function(x, y, w, h, color)
{
	if (x == null || y == null || w == null || h == null)
	{
		alert("You must pass in all the veriables for a rectangle: (x, y, width, height)");
		
		var errorMsg = "The following are not provided:";
		if (x == null)
			errorMsg += " 'x' ";
		if (y == null)
			errorMsg += " 'y' ";
		if (w == null)
			errorMsg += " 'width' ";
		if (h == null)
			errorMsg += " 'height'";
		
		alert(errorMsg);
		throw new Error(errorMsg);
	}

	this.x		= x;
	this.y		= y;
	this.width	= w;
	this.height	= h;
	
	this.Intersects = function(shape)
	{
		var offset = 0;
		if (shape.radius != null)
			offset = shape.radius;
		
		if (this.Contains(shape.x - offset, shape.y - offset) || this.Contains(shape.x + shape.width - offset, shape.y - offset) ||
			this.Contains(shape.x - offset, shape.y + shape.heigh - offset) || this.Contains(shape.x + shape.width - offset, shape.y + shape.height - offset))
		{
			return true;
		}
		else if (shape.Contains(this.x - offset, this.y - offset) || shape.Contains(this.x + this.width - offset, this.y - offset) ||
			shape.Contains(this.x - offset, this.y + this.height - offset) || shape.Contains(this.x + this.width - offset, this.y + this.height - offset))
		{
			return true;
		}
		
		return false;
	};
	
	this.Contains = function(x, y)
	{
		if (x >= this.x && x <= this.x + this.width &&
			y >= this.y && y <= this.y + this.height)
			return true;
		else 
			return false;
	};
	
	this.Draw = function(ctx, color)
	{
		ctx.fillStyle = color;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	}
};
Last edited by Miroidan on Tue Oct 28, 2014 3:48 am, edited 1 time in total.
Sim
Posts: 412
Joined: Sat Dec 26, 2009 5:37 pm

Re: Problem with HTML5/JavaScript

Post by Sim »

got a link?
oRPG Creator - Make Your Own Browser Game
oRPG Creator on Facebook
User avatar
Miroidan
Posts: 53
Joined: Sat Sep 27, 2014 7:23 pm

Re: Problem with HTML5/JavaScript

Post by Miroidan »

Sim wrote:got a link?
Uploaded to a temporary website. http://gleavia.netai.net/ does it work for you?
User avatar
Ark
Posts: 427
Joined: Wed Jun 01, 2011 10:25 pm

Re: Problem with HTML5/JavaScript

Post by Ark »

It doesnt renders anything because the height of the canvas is 0px.

from the html of the link you provided:

Code: Select all

<canvas id="canvas" width="1920" height="0" style="width: 1920px; height: 0px;">
Also it won't matter which OS and web server you're using to serve the html. What it matters is which browser the user is using to view the html.

edit:

The error is located on your main.js file

Code: Select all

canvas.height         = document.body.clietHeight; // Should be .clientHeight
IMO you should be using window.innerHeight and window.innerWidth instead of document.body.clientHeight etc. as those are the real dimensions of the client browser view size.
Orgullo Catracho
User avatar
Miroidan
Posts: 53
Joined: Sat Sep 27, 2014 7:23 pm

Re: Problem with HTML5/JavaScript

Post by Miroidan »

Ark wrote:It doesnt renders anything because the height of the canvas is 0px.
The error is located on your main.js file

Code: Select all

canvas.height         = document.body.clietHeight; // Should be .clientHeight
IMO you should be using window.innerHeight and window.innerWidth instead of document.body.clientHeight etc. as those are the real dimensions of the client browser view size.
Thanks for helping me out! I took your advice and changed the document.body height and width and changed it to window.innerHeight etc. Thanks!
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Problem with HTML5/JavaScript

Post by Jackolantern »

It is also a good idea to wait for the HTML to render before running your Javascript. If it is working now that you set the height of your canvas, you are probably just barely getting by because your page is so simple it actually is rendering the canvas just before the JS runs. But if you added more to the page, there is a good chance that the canvas will not be rendered when your JS runs. jQuery has the best function for waiting for the HTML to render without waiting on images to load, but a much less efficient way exists in vanilla JS through the window.onload event.
The indelible lord of tl;dr
Post Reply

Return to “Beginner Help and Support”