I am trying to change the value of "selectedArea" to the values I get from the mouse. Whenever I try to do so I get "Uncaught TypeError: Cannot read property 'start' of undefined". (mouseDown()) Probably an easy solution, just that I can not see it(quite new to javascript).
var areaSelection = {
mouseisDown: false,
selectedArea: {
start: { x: 0, y: 0 },
end: { x: 0, y: 0 }
},
initialize: function () {
canvasSource.addEventListener("mousedown", this.mouseDown);
canvasSource.addEventListener("mousemove", this.mouseMove);
canvasSource.addEventListener("mouseup", this.mouseUp);
},
mouseDown: function (event) {
if (!this.mouseisDown) {
this.selectedArea.start.x = event.clientX;
this.selectedArea.start.y = event.clientY;
}
},
mouseMove: function (event) {
if (this.mouseisDown) {
var x = this.selectedArea.start.x;
var y = this.selectedArea.start.y;
var width = event.clientX - x;
var height = event.clientY - y;
drawOverlay(x, y, width, height);
}
},
mouseUp: function (event) {
if (this.mouseisDown) {
this.selectedArea.end.x = event.clientX;
this.selectedArea.end.y = event.clientY;
}
}
};