Udacity HTML5 course (1)

* creating a XMLHttpRequest object
var request = new XMLHttpRequest();
request.open ('GET', myUrl, true); // true = async
request.onload = function () {
  // define your function
}
request.send();

* classes which extend other classes
Weapon = Class.extend({
    init: function() {  this._super(); }
});

MachineGun = Weapon.extend({
    init: function() { this._super(); }
});

* append a new image to a canvas
var img = new Image();
img.src = 'mySrc';
img.onload = function () {
  var canvas = document.createElement("canvas");
  var ctx = canvas.getContext('2d');
  var obj = ctx.drawImage(img, 192,192);
  // the origin of the canvas xOy system is on the top left corner
}

* Jpeg - good size/compression; bad Alpha
Png - bad size/compression; good Alpha
Webp - good; good

* create an animated canvas
// assets = array of paths to images; frames = new array of images
for (var i=0; i<assets.length; i++) {
        var img = new Image();
        img.src = assets[i];
        img.onload = onImageLoad;
        frames.push(img);
    }
var frameRate = 1000/30; // 30 fps
setInterval(animate, frameRate);

var animate = function() {
   // ctx = canvas.getContext('2d');
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.drawImage(frames[frame], 0, 0); // changes the current image to the next one
   frame++;
   if (frame == frames.length) {
        frame = 0;
   }
};