I am currently learning canvas and js that comes with it in HTML. I've bumped into a problem that I cannot understand, but I want to.

I am struggling to understand why arrow function returns undefined, while casual func returns HEX code like normal.

Here's the code:

document.querySelector('#color').oninput = () => {
    myColor = this.value;
    console.log(this.value)
}
canvas.onmousedown = (e) => {
    canvas.onmousemove = (e) => {
        let x = e.offsetX;
        let y = e.offsetY;
        context.fillRect(x - 5, y - 5, 10, 10);
        context.fillStyle = myColor;
        context.fill();
        
    }
    canvas.onmouseup = () => {
        canvas.onmousemove = null;
    }

}

It returns undefined

But, if I change code like this:

document.querySelector('#color').oninput = function () {
    myColor = this.value;
    console.log(this.value)
}

It returns HEX.
What seems to be the issue?