Different console.log property values on object and object + property

Question

Iam currently playing around a bit with JavaScript and wanted to make a small canvas app.

My JavaScript code for this is

"use strict";

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let mouseDown = false;
let lastEvent;



canvas.onmousedown = function(e) {
    e.preventDefault();
    lastEvent = e;
    mouseDown = true;

    context.beginPath();
    context.lineWidth="5";
    context.strokeStyle="black";
    context.moveTo(e.offsetX,e.offsetY);
    context.lineTo(e.offsetX-4,e.offsetY-4);
    context.stroke();

    console.log(lastEvent);
    console.log(lastEvent.offsetX);
    console.log(e.offsetX);
    console.log(e);
};

canvas.onmousemove = function(e) {
    e.preventDefault();
    if (mouseDown) {
        context.beginPath();
        context.lineWidth="5";
        context.strokeStyle="black";
        context.moveTo(lastEvent.offsetX,lastEvent.offsetY);
        context.lineTo(e.offsetX,e.offsetY);
        context.stroke();
        lastEvent = e;
    };
};

canvas.onmouseup = function(e) {
    e.preventDefault();
    mouseDown = false;
};

As you can see the plan is: When the mouse moves on my canvas I draw a line by capturing the last mouse event and then drawing from there to the current mouse event. At last of course it doesnt work out as planned. For some reason the lastEvent.offsetX and .offsetY always turn out to be 0.

Now lets move to the onmousedown function, while the bug isnt caused here (atleast I hope) its where I tracked down whats going wrong and its confusing the hell out of me. I have 4 console.log statements here and their output is the cause of the confusion.

console.log(lastEvent) output is (when looking the offsetX up in the console) 0

console.log(lastEvent.offsetX) output is (for example) 127

console.log(e.offsetX) output is also 127

console.log(e) output is (again looking offsetX up in the console) 0

and I completely dont understand how that is possible? When I call the object and then look the property value up its different when I directly ask for the value of the property?? Because of my understanding both values should be the same, as the object isnt changed anymore at this point.

I can think of a workaround to this problem, but what iam more curious about if someone could explain me please what is going on here?

Answer 1

The lastEvent object will be updated after your method is finish and console.log reflect the object it self, not making a copy of it. You can test that by this simple snippet:

var myobj = { c : 1 };
console.log('my obj:', myobj);
console.log('c is', myobj.c);
myobj.c = 0;
//now check the logged object again.

For easier debugging, you can use Chrome Inspector or use debugger; to add a breakpoint in your code then feel free to inspect everything.