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 :*