Introduction to JavaScript and HTML5 Canvas

Screencast of a tutorial given at UMass Lowell on 2/11/13 by Curran Kelleher on JavaScript and HTML5 Canvas. Topics covered include fundamentals of the JavaScript language, creating an HTML5 page with a Canvas on it, drawing rectangles to the Canvas, and animation.

[BradenBest]

Two things:

1: When using SEAFs, you must use semicolons at the end of functions and anything preceding the SEAF so it doesn't think you're trying to call some kind of weird function

So "}(function(){})()" is seen as "function(){}()()" with a function as an argument, thus "undefined is not a function" is thrown; it should become "};(function(){})();", notice the semicolons.

2: it's webkitRequestAnimationFrame()

[jjemknox]

Awesome video!! Please post more if you have them!!!!

[NVL]

Thanks! Very helpful. I was looking for exactly this minus the html bits. :)

[Vorenus]

around the 30 minute mark the reason for the CSS is for the vendor presets. Most of the browsers add default styles, in this case a 8px margin to the body tag. 

[NeilRoy]

Like C, you can do for loops without the curly braces if you only have one line of code to run, so this works as well...

for(var i=0; i<5; i++) console.log(i);

...I prefer that myself when I code in C as to me, it just looks cleaner. You only really ever need the braces { } when you have more than one line of code to execute.

Interesting tutorial. The "var function" stuff bugs me a little as a variable is not a function, I can't imagine why anyone felt that was a good idea but.

Also, the constant throat clearing and interruptions of questions can get a tad annoying. I would think that questions should be saved until after you are done explaining each part, rather than in the middle of doing it.

[currankelleher]

I just tried it out and the variable was indeed defined, so no argument there ;)

[shredhappy]

45:00 It does the same thing in that example but I would have explained _hoisting_ because they do have different behaviors ie. calling a function before it's defined.

[currankelleher]

Thanks! Please share. I think this style should replace high school CS courses.

[BradenBest]

Basically, I thought some js purist was going to come along and start a long debate about why we should use getElementById even though it's redundant.

This seems to happen every single time I point out something of the like.

Anyways, I'm glad my tips helped :)

[Buddharey]

error fix: place the RAF *before* the render() to assure as closure

[currankelleher]

Someone pointed out that all tags with id's are automatically assigned to global variables, i.e. canvas id="myCanvas"... will assign a variable, window.myCanvas, as a reference to it, making getElementById redundant. This is true, and I did not know about it! So you can forget about if you want. Thanks to user B1KMusic for this.

[einsteinwallah]

you should do one video where you can show how the problem you had at end could be debugged

[BradenBest]

Yeah, I've been screwed by the "undefined/null is not a function" error countless times, haha.

How about the app-breaking 'unexpected token u' error that comes with making a tiny localStorage/JSON error. Then you have to manually delete the localStorage and carefully eyeball the error in the code.

A weird part of those errors is that the very first line in the HTML source gets indiscriminately highlighted.

Fun times, eh?

[currankelleher]

Thanks for the tips! Haha what a moment when the whole thing didn't work at the end. (if readers are wondering, SEAF = Self-Executing Anonymous Function)

[eranfinkle]

@B1KMusic, no1 calls it SEAF anymore, it's called IIFE nowadays

[sivaguru]

I want to insert image in the canvas. Is it possible? If possible means will the image become responsive?

[BradenBest]

Oh, yeah. I deleted that comment cause I remembered that last time I mentioned the redundancy of getElementById, there was a huge argument.

Anyways, you're welcome for the tips :)

[Ominuneveak]

can you help me with  broken notebook and some linux in there

[CyberIllusions]

This is what flash could do about 13 years ago.

[enochk]

Great tutorial! Haha this was done a long time ago, but when you stopped I was like, it's :P I wish I could of been there to help ya out on that one ;). But good stuff, loved the vid!