Problem with HTML5/JavaScript
Posted: Tue Oct 28, 2014 1:57 am
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
main.js
rectangle.js
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>
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);
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);
}
};