свойства объекта события

[Morr123]

Есть такой класс

function Sketch(name) {
      this.isDrawing;
        
      this.canvas = document.getElementById(name);
      this.context = this.canvas.getContext("2d");
      // Подключаем требуемые для рисования события
      this.canvas.onmousedown = this.startDrawing;
      this.canvas.onmouseup = this.stopDrawing;
      this.canvas.onmouseout = this.stopDrawing;
      this.canvas.onmousemove = this.draw;
      this.context.lineWidth = 5;
      this.context.strokeStyle = '#ff0';
      this.context.lineJoin = "round";
      this.context.lineCap = "round";
 
   this.startDrawing = function(e) 
   {
    // Начинаем рисовать
       this.isDrawing = true;
    
    // Создаем новый путь (с текущим цветом и толщиной линии) 
       this.context.beginPath();
    
    // Нажатием левой кнопки мыши помещаем "кисть" на холст
       this.context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
    }
 
    this.draw = function(e) 
    {
       if (this.isDrawing == true)
       {
        // Определяем текущие координаты указателя мыши
          var x = e.pageX - this.canvas.offsetLeft;
          var y = e.pageY - this.canvas.offsetTop;
        
        // Рисуем линию до новой координаты
          this.context.lineTo(x, y);
          this.context.stroke();
       }
    }
 
    this.stopDrawing = function() 
    {
        isDrawing = false;  
    }
 
};

где свойства this.canvas.onmousedown и т.д. это события к которым присвоено значение обработчика.

при объявлении данного класса в коде

var sketch = new Sketch('sketch');

этот класс поидее должен слушать эти события и внутри себя реагировать на них, но он этого не делает! даже по дебагеру события просто не срабатывают. Если написать тоже самое только не в классе а обычными функциями то все работает.
Как мне сделать это в стиле ООП, но что бы срабатывали события?

[Rise]

Morr123,

this.canvas.onmousedown = this.startDrawing.bind(this);

[renatdmit]

Morr123,

this.startDrawing такая же переменная, как и все прочие, несмотря на то, что ей присваивается функция. Поэтому когда вы пытаетесь событиям присвоить значение переменной, которая определяется ниже по коду - естественно ничего не присваивается.

Это как если бы вы написали:

a = c;
b = c;

c = 1;

и ждали бы что a и b будут у вас равны 1.

[warren buffet]

Если бы ТС посмотрел в консоль браузера, то все сам бы понял. ТС, открой тайну, почему народ вроде тебя не смотрит лог ошибок и предупреждений?

[warren buffet]

this.startDrawing такая же переменная

Которой присвоена безымянная функция. А ТС привык декларировать подпрограммы function name(){}, когда расположение такой декларации в коде николебет.

ТС, а расположение переменных - колебет. Просто перемести вниз листенеры и все.

ЗЫ Нет, не все. Господин профессор Rise напоминает, что this внутри калбека листенера будет элементом, на котором висит листенер. Так вот, биндить объектный this внутрь калбека тут просто необходимо, но приятнее иметь оба this'а, ради чего просто присвой внутренней переменной с любым именем this объекта, например

var the = this;

и замени в калбеке this.startDrawing все this на the

Решение с the=this принимается исходя из контекста. Если this как элемент точно не нужен - бинди, а если нужен, например там роутер и надо проверять if(this===e.target) то присваивай.

И последнее. Я совершенно уверен, что практически все проперти и методы в этом объекте можно сделать приватными, а значит никаких this вообще не надо. Функция просто развешает калбеки в своем скопе и все будет работать само по себе.