Cho em hỏi lý do hàm draw() của Ball không hoạt động với ạ!

Chào mọi người ạ, em học JS và đang làm bài tập của Mozilla [https://goo.gl/2bMquM]. Em đã thử viết nhưng khi chạy lên thì các quả bóng không hiện ra, cũng như evilCircle. Đây là code của em ạ:

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

var width = canvas.width = window.innerWidth-9;
var height = canvas.height = window.innerHeight-100;

function Shape(x, y, velx, vely, exists) {
	this.x = x;
	this.y = y;
	this.velX = velx;
	this.velY = vely;
	this.exists = exists;
}

Shape.prototype.draw = function() {
	ctx.beginPath();
	ctx.fillStyle = this.color;
	ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
	ctx.fill();
}

Shape.prototype.update = function() {
	if((this.x + this.size) >= width - 5) {
		this.velX = -this.velX;
	}
	if((this.x - this.size) <= 5) {
		this.velX = -this.velX;
	}
	if((this.y + this.size) >= height - 5) {
		this.velY = -this.velY;
	}
	if((this.y - this.size) <= 5) {
		this.velY = -this.velY;
	}
	this.x += this.velX;
	this.y += this.velY;
}

Shape.prototype.collisionDetect = function() {
	for(var i = 0; i < balls.length; i++) {
		if(this !== balls[i]) {
			var distance = ((this.x - balls[i].x)*(this.x - balls[i].x) + (this.y - balls[i].y)*(this.y - balls[i].y));
			if(distance <= (this.size + balls[i].size)*(this.size + balls[i].size)) {
				this.color = balls[i].color = 'rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')';
			}
		}
	}
}

function Ball(x, y, velx, vely, color, size) {
	Shape.call(x, y, velx, vely, true);
	this.color = color;
	this.size = size;
}

Ball.prototype = Object.create(Shape.prototype);
Ball.prototype.constructor = Ball;

function EvilCircle(x, y, exists) {
	Shape.call(x, y, 20, 20, exists);
	this.color = 'white';
	this.size = 10;
}

EvilCircle.prototype.draw = function() {
	ctx.beginPath();
	ctx.strokeStyle = this.color;
	ctx.lineWidth = 3;
	ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
	ctx.stroke();
}

EvilCircle.prototype.checkBounds = function() {
	if((this.x + this.size) >= width-10) {
		this.velX = 0;
	}
	else if((this.x - this.size <= 10)) {
		this.velX = 0;
	}
	else {
		this.velX = 20;
		this.x += this.velX;
	}
	if((this.y + this.size) >= height-10) {
		this.velY = 0;
	}
	else if((this. y - this.size) <= 10) {
		this.velY = 0;
	}
	else {
		this.velY = 20;
		this.y += this.velY;
	}
}

EvilCircle.prototype.setControls = function() {
	window.addEventListener("keydown", function(e) {
	var _this = this;
		if(e.keyCode === 65) {
			_this.x -= _this.velX;
		}
		else if(e.keyCode === 68) {
			_this.x += _this.velX;
		}
		else if(e.keyCode === 87) {
			_this.y -= _this.velY;
		}
		else if(e.keyCode === 83) {
			_this.y += _this.velY;
		}
	});
}

EvilCircle.prototype.collisionDetect = function() {
	for(var i = 0; i < balls.length; i++) {
		var distance = Math.sqrt((this.x - balls.x)*(this.x - balls.x) + (this.y - balls.y)*(this.y - balls.y))
		if(distance <= (this.size)) {
			balls.exists = false;
		}
	}
}

var evilCircle = new EvilCircle(200, 200, true);
evilCircle.setControls();
var balls = [];

function loop() {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
    ctx.fillRect(0, 0, width, height);
	while(balls.length < 25) {
		var ball = new Ball(random(0, width), random(0, height), random(-20, 20), random(-20, 20), 'rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')',
		random(5, 15));
		balls.push(ball);
	}
	for(var i = 0; i < balls.length; i++)
	{
		balls[i].draw();
		balls[i].update();
		balls[i].collisionDetect();
	}
	evilCircle.draw();
	evilCircle.checkBounds();
	evilCircle.collisionDetect();
	requestAnimationFrame(loop);
}

loop();

// function to generate random numbers

function random(min,max) {
  var num = Math.floor(Math.random()*(max-min)) + min;
  return num;
}

Bật F12 không thấy báo lỗi nên khó fix quá ạ, cảm ơn mọi người.