Tworzenie obiektu Events - canvas.

Witam,

zacząłem poznawać canvas z książką "HTML5 Canvas", rok jej wydania to 2013 i jest trochę nieaktualna. Chciałbym prosić o pomoc w uruchomieniu skryptu. Po otworzeniu konsoli otrzymuję błąd w postaci: "Uncaught ReferenceError: Events is not defined(...)"

Kod events.js:

function addPoint(events, points){
	var context = events.getContext();
	var drawingPos = events.getMousePos();

	if(drawingPos !== null){
		points.push(drawingPos);
	}
}

function drawPath(canvas, points, canvasImg){
	var context = canvas.getContext("2d");

	//wyczyszczenie płótna
	context.clearRect(0,0,canvas.width, canvas.height);

	//przerysowanie płótna przed wyświetleniem ścieżki
	context.drawImage(canvasImg, 0, 0, canvas.width, canvas.height);

	//wyświetlenie ścieżki
	context.beginPatch();

	context.lineTo(points[0].x, points[0].y);
	for(var n = 1; n < points.length; n++){
		var point = points[n];
		context,lineTo(point.x, point.y);
	}
	context.stroke();
}


//Funkcja aktualizująca kolor tła prostokąna prezentującego kolor na pasku narzędzi:
function updateColorSquare(){
	var red = document.getElementById("Red").value;
	var green = document.getElementById("Green").value;
	var blue = document.getElementById("Blue").value;

	var colorSquare = document.getElementById("colorSquare");
	colorSquare.style.backgroundColor = "rgb(" + red + "," + green + "," + blue + ")";
}


//Funkcja zwracająca obiekt obrazka reprezentującego zawartość elementu canvas:
function getCanvasImg(canvas){
	var img = new Image();
	img.src = canvas.toDataURL();
	return img;
}

//obiekt Events reprezentujący zawartość elementu canvas, inicjalizujący kolor jakim użytkownik będzie rysować, oraz szerokość linii:
window.onload = function(){
	var events = new Events("myCanvas");
	var canvas = events.getCanvas();
	var context = events.getContext();
	var isMouseDown = false;
	var canvasImg = getCanvasImg(canvas);
	var points = [];

	//inicjalizacja parametrów rysowania
	var red = document.getElementById("red").value;
	var green = document.getElementById("green").value;
	var blue = document.getElementById("blue").value;
    var size = document.getElementById("size").value;

    //aktualizacja sekwencji koloru po wprowadzeniu nowych danych
    //dodanie procedur obsługi zdarzeń
    document.getElementById("red").addEventListener("keyup", function(evt){
    	updateColorSquare();
    }, false);
    document.getElementById("green").addEventListener("keyup", function(evt){
    	updateColorSquare();
    }, false);
    document.getElementById("blue").addEventListener("keyup", function(evt){
    	updateColorSquare();
    }, false);

    //czyszczenie płótna, gdy użytkownik kliknie przycisk wyczyść:
    document.getElementById("clearButton").addEventListener("click", function(evt){
    	events.clear();
    	points =[];
    	canvasImg = getCanvasImg(canvas);
    }, false);
    //zapis - skonwertowana zawartość elementu canvas na postac danych URL i wyświetlenie rysunku jako obrazek w nowym oknie przeglądarki
    document.getElementById("saveButton").addEventListener("click", function(evt){
    	//otworzenie nowego okna z zapisanym rysunkiem, tak by użytkownik mógł go kliknąć i zapisać na swoim komputerze
    	window.open(canvas.toDataURL());
    }, false);
    //pobieranie bieżącej pozycji myszki, określenie koloru, szerokości linii i stylu ścieżki, dodanie pierwszego punktu do tablicy a następnie przypisanie fladze isMouseDown wartości TRUE
    canvas.addEventListener("mousedown", function(){
    	var drawingPos = events.getMousePos();

    	//aktualizacja parametrów rysowania
    	red = document.getElementById("red").value;
    	green = document.getElementById("green").value;
    	blue = document.getElementById("blue").value;
    	size = document.getElementById("size").value;

    	//rozpoczęcie rysowania ścieżki
    	context.strokeStyle = "rgb(" + red + "," + green + "," + blue + ")";
    	context.lineWidth = size;
    	context.lineJoin = "round";
    	context.lineCap = "round";
    	addPoint(events, points);
    	isMouseDown = true;
    }, false);
    //w ramach obsługi zdarzenia mouseup przypisać fladze isMouseDown wartość false, narysować ścieżkę, a następnie zpaisać obrazek stanowiący zawartość elementy canvas:
    canvas.addEventListener("mouseup", function(){
    	isMouseDown = false;
    	if(points.length > 0) {
    		drawPath(this, points, canvasImg);
    		//wyczyszczenie punktów
    		points = [];
    	}
    	canvas = getCanvasImg(this);
    }, false);
    //Kiedy użytkownik usunie wskaźnik myszy  obszaru elementu, zasymulować zdarzenie mouseup
    canvas.addEventListener("mouseout", function(){
    	if(document.createEvent){
    		var evt = document.createEvent('MouseEvents');
    		evt.initEvent("mouseup", true, false);
    		this.dispatchEvent(evt);
    	}
    	else {
    		this.fireEvent("onmouseup");
    	}
    }, false);
    //Określenie funkcji stage() która będzie nieustannie dodawać do aktualnej ścieżki nowe punkty, o ile tylko użytkownik przesuwa wskaźnik myszy, naciskając przy tym jej przycisk:
    events.setDrawStage(function(){
    	if(isMouseDown){
    		addPoint(this,points);
    		drawPath(canvas, points, canvasImg);
    	}
    });
};

Fragment kodu index.html:

<div id="toolbar">
  	<label>
  	Kolor:
  	</label>
  	R: <input type="text" id="red" maxlength="3" class="short" value="0">
  	G: <input type="text" id="green" maxlength="3" class="short" value="0">
  	B: <input type="text" id="blue" maxlength="3" class="short" value="255">
  	<div id="colorSquare">
  	</div>
  	<label>
  		Wielkość:
  	</label>

  	<input type="text" id="size" maxlength="3" class="short" value="20">px
	<input type="button" id="clearButton"value="Wyczyść">
  	<input type="button" id="saveButton"value="Zapisz">
  	</div>
  	<canvs id="myCanvas" width="600" heigth="250">
  	</canvs>

  	 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
    <script src="js/events.js"></script>

Problem leży w tworzeniu obiektu Events w pliku events.js, linia: "var events = new Events("myCanvas");". Czy mógłby ktoś pomóc? Z góry piękne dzięki :*