1. function getMousePos(e)
2. {
3.     var rect=canvas.getBoundingClientRect();
4.     return{
5.         x: e.clientX-rect.left,
6.         y: e.clientY-rect.top
7.     };    
8. }
9.         Rysowanie aplikacji, odbywa się przy pomocy zdarzeń, wywoływanych ruchami myszy po polu canvas. Nie byłoby to możliwe bez ustawienia parametrów  przez program. Służy do tego funkcja „getMousePos(e)”, która zwraca położenie myszy. Element canvas nie rozpoczyna się od górnej krawędzi okna przeglądarki. W tym miejscu znajduje się kontener „toolbars”, którego wymiary muszą zostać uwzględnione w obliczaniu parametrów myszki. Metoda „getBoundingClientRect()”, zwraca takie wartości jak , „top, bottom, left, right”, otaczające element canvas.Wartości „clientX” oraz „clientY”, zwracają pozycję kursora od krawędzi widocznego obszaru strony[15]. Od tych wartości konieczne jest odjęcie krawędzi pola cavnas, co ostatecznie zwraca gotowe parametry myszy do rysowania po polu canvas.
10.  
11. function mouseDown(e)
12. {    
13.     ctx.globalAlpha=document.getElementById("opa").value;    
14.     mouse=true;
15.     mousePosition=getMousePos(e);      
16.     getcanvasImg();      
17. }
18.         Pierwsza metoda wywołana przez zdarzenie klinięcia myszki jest „mouseDown(e)”. W jej wnętrzu zostają nadane wartości trzem zmiennym. Jedna z nich to zmienna globalna. Oznacza to, że zmienna będzie współdzielona przez cały kod. Jest ona odpowiedzialna za zmianę przezroczystości rysowanych kształtów. Kolejna zmienna „mouse”, ustawiona została na wartość „true”. Dla kodu jest to równoznaczne z wciśniętym klawiszem myszy. Wartość „false” dla tej samej zmiennej oznacznałoby puszczenie klawisza myszy. Parametry położenia myszy zostają przesłane do zmiennej „mousePosition”. Na samym końcu zostanie wywołana funkcja „getcanvasImg()”, która służy do zapisywania aktualnego stanu canvas.
19.  
20.  
21. function mouseMove(e)
22. {
23.     ctx.globalAlpha=document.getElementById("opa").value;
24.     var pos;
25.     if (mouse===true)
26.     {        
27.        if (pen.style.border!=="2px solid red"&&eraser.style.border!=="2px solid red")
28.         {
29.             putcanvasImg();
30.         }
31.         pos=getMousePos(e);        
32.         draw(pos);              
33.     }    
34. }
35.         Podobnie jak w poprzedniej metodzie, została zaimplementowana zmienna odpowiedzialna za zmianę przezroczystości.  Do zmiennej „pos” zostaną przypisane parametry myszy, które zostaną wykorzystane w metodzie „draw(pos)”. W funkcji „mouseMove(e)” , wytępuje instrukcja warunkowa „if”. Oznacza to, że zostanie wykonana część kodu pod warunkiem spełnionym w nawiasach. W przypadku wciśnięcia przycisku myszy, skrypt wczyta i ustawi zapisany w poprzedniej metodzie obraz za pomocą metody „putcanvasImg()”.
36. function mouseUp(e)
37. {  
38.     ctx.globalAlpha=document.getElementById("opa").value;
39.     cPush();
40.     mouse=false;
41.     if (pen.style.border!=="2px solid red"&&eraser.style.border!=="2px solid red")
42.     {
43.         putcanvasImg();                        
44.     }
45.     var pos=getMousePos(e);
46.     draw(pos);      
47. }
48.         Ostanią z ważniejszych metod w aplikacji jest „mouseUp(e)”. W momencie puszczenia klawisza myszki, program ustawi wartość zmiennej „down” na „false”. Tak jak w poprzedniej metodzie zostanie zapisany stan aktualnego pola canvas, czyli to co znajduje się na ekranie w momencie puszczenia klawiszu myszki. Do nowo utworzonej zmiennej „pos” zostaje przypisana wartość zwracana z metody „getMousePos(e)” a program uruchomi metodę „draw(e)”. Dodatkowo funkcja wywołuje metodę „cPush()”, która jest powiązana z przyciskiem „undo”
49.  
50. [15] https://kursjs.pl/kurs/events/mouse.php
51.  
52.