4 Forum Posts by "Guffaw"
At 7/24/13 06:37 PM, xonkdp wrote: Here is the complete code:
<!DOCTYPE html>
<html>
<head lang = 'en'>
<meta charset=utf-8">
<title>HTML5 Canvas Hello World!</title>
<script type="text/javaScript">
function pageLoaded(){
var theCanvas = document.getElementById('myCanvas');
var context = theCanvas.getContext('2d');
context.font="30px Arial";
context.fillText("Hello World",10,50);
}
</script>
</head>
<body onload = 'pageLoaded();'>
<canvas id='myCanvas' width='600' height='400' style='border:black 1px solid;'> Quit using Netscape and get a new browser! Seriously though...get Chrome or Firefox</canvas>
</body>
</html>
Just a couple things I wanted to make a point of here.
1. You should keep the type of quotes you use the same throughout the code:
var theCanvas = document.getElementById('myCanvas');
var context = theCanvas.getContext('2d');
context.font="30px Arial";Keep them all to either single or double, unless quoting something inside a variable:
var foo = "My name is 'John'";Or even if you want double quotes inside doubles or vice versa, you can escape them as well.
var foo = "My name is \"John\"";This is my personal preference, but it does make it easier to read, for me at least.
2. Script tags.
The way you opened your script tag is technically acceptable, but the more standard way to do it would be:
<script>
</script>or
<script type="text/javascript">
</script>There's no need to capitalize the S in JavaScript (except when spelling it out like it should be.) In the code, there is no need.
3. Running JavaScript when the page loads.
<body onload = 'pageLoaded();'>is an extremely ugly way of doing it in my eyes. There are a couple other ways to go about it:
<script>
window.load = function()
{
// Stuff.
}or if you're using jQuery somewhere else on the website:
<script>
$(document).ready(function()
{
// Stuff.
});
</script>I'm sure there are other ways to also go about it that look much cleaner than either of these, but I don't know them. I would also not recommend adding jQuery in just for this purpose, it's too large to only have one purpose on your website.
Keep in mind I have very little knowledge about how JavaScript and the <canvas> tag work together, but these were more just general tips to keep in mind. If I've said something incorrect here, please let me know! It's been a while since I've done much web development work. :P
Cream and a bit o' sugar. Good stuff.
As you wish.
"~/" is "home" in Linux ( /home/<user> ), referring to where all your shit is kept. C:\Users\<user> on Windows.
There's no place like home. Get it?
