Локальные переменный
 

Проблема в незнании ООП в js , я не сильно понимаю что вообще нужно гуглить , напишите название темы или хоть ссылку на ресурс с ответами .
Проблема в том что мне нужно определять нажатия пo canvas'у для этого использую вот это :

document.getElementById('canvas').addEventListener('click',function(evt){}

И я должен получить this.active переменную . Но addEventListener это функция или нет , не суть , когда я пишу this. то получаю сообщение о том что переменная не найдена , как создать глобальную переменную ?
ВОТ КОД:

activeChecker(){
		
		var canGoarray = this.canGoarray
		this.active = this.active;
			document.getElementById('canvas').addEventListener('click',function(evt,active = this.active){
				alert(active);
				if(active == true){
					for(var i = 0 ; i < canGoarray.length;i++){
						if( Math.round(evt.clientY/cellSize)-1 == canGoarray[i][0] && Math.round(evt.clientX/cellSize)-1 == canGoarray[i][1]  ){
								alert(1);
						}
					}
				}
				//this.setActive(false);
			},false);
			
		
	}

Добавь в класс метод .handleEvent(event), после чего вещай обработчик так: .addEventListener('event', this) - все события будут попадать в handleEvent в котором будет нужный this и соответственно доступ к this.active.

Ещё можно, если логика требуется не сложная, использовать стрелочную функцию:

.addEventListener('event', event => {
  //this.active ...
});

Стрелочная функция захватывает this родителя.

Есть также множество дедовских вариантов привязки this, но в наше время оные уже не имеют особо практического смысла.)

Точнее по отдельным его фрагментам? Тогда вам понадобится какая-нибудь простенькая библиотека по работе с canvas.