DIfferentiating between multiple event listeners

Can someone explain where my thinking goes wrong here ?
I have a class that adds a mousedown event listener to a specified canvas.
I make two instances of the class attached to two different canvases.
I expect to get responses from both instances but all responses say they’re from the second instance.

class Mycanvas{
  constructor (canvas,name){
    self = this;
    this.name=name;
    canvas.addEventListener('mousedown', mousedown);
  }
  function mousedown(){console.log(self.name)}
}
let mycanvas1 = Mycanvas(canvas1,'1');
let mycanvas2 = Mycanvas(canvas2,'2');

BUT, this code works fine :

class Mycanvas{
  constructor (canvas,name){
    this.name=name;
    canvas.addEventListener('mousedown', ()=>console.log(this.name));
  }
}
let mycanvas1 = Mycanvas(canvas1,'1');
let mycanvas2 = Mycanvas(canvas2,'2');