Actualmente estoy aprendiendo canvas y js que viene con HTML. Me he topado con un problema que no puedo entender, pero quiero hacerlo.

Estoy luchando por entender por qué la función de flecha devuelve indefinido, mientras que la función casual devuelve el código HEX como de costumbre.

Aquí está el código:

 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; } }

Devuelve indefinido

Pero, si cambio el código como este:

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

Devuelve HEX .
Lo que parece ser el problema?