Нарисуй на холсте объяснение

Question

Я хочу нарисовать на холсте, я видел пример, но я не понимаю этого: x:event.clientX - rect.left, в этой части кода:

getMousePos : function(event) {
        rect = this.canvas.getBoundingClientRect();
        return{
            x:event.clientX - rect.left,
            y:event.clientY - rect.top
        };
    },

Что означает -?Извините, это вопрос новичка: D

Answer 1

Это простой знак вычитания, просто математическая операция между двумя координатами:

event.clientX - rect.left

Answer 2

Это вычитание, так же просто, как 5 - 3 = 2

Причина этого вычитания состоит в том, что свойства clientX и clientY представляют координаты X и Y события внутри всего документа .

Переменная rect содержит позицию вашего холста внутри документа, поэтому event.clientX - rect.left дает вам горизонтальное положение, в пикселях, относительно холста , в котором вы пытаетесь нарисовать.